function HomeController($scope, navbarService) {
var vm = this;
$scope.showHeader = true;
$scope.userNameNav ='';
$scope.$on('toggleHeader', function(event, data) {
$scope.showHeader = data;
});
$scope.$on('changeName', function(event, data) {
$scope.userNameNav = data;
});
$scope.searchForItem = function() {
console.log('search button clicked');
console.log($scope.userSearch);
};
}//end HomeController.Navigation {
width:100%;
height:25em;
background-image: url('http://wallpapercave.com/wp/UYnUUzz.jpg');
background-size: cover;
background-position:50% 50%;
position: sticky;
}
.navContent {
float:right;
}
.searchNav {
border: 0;
border-bottom: 1px solid red;
outline: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rental app</title>
<link rel="stylesheet" href="styles/userPage.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="vendors/angular.min.js" charset="utf-8"></script>
<script src="vendors/angular-route.min.js" charset="utf-8"></script>
<script src="scripts/controllers/homeController.js" charset="utf-8"></script>
<script src="scripts/controllers/RegisterController.js" charset="utf-8"></script>
<script src="scripts/controllers/LoginController.js" charset="utf-8"></script>
<script src="scripts/controllers/userController.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<script src="scripts/services/credentialsService.js" charset="utf-8"></script>
<script src="scripts/services/navBarService.js" charset="utf-8"></script>
<script src="scripts/services/addItemSerivce.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link rel="stylesheet" href="styles/register.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app='myApp'>
<div class="" ng-controller='HomeController'>
<div class="navImage">
<div class="Navigation" ng-if='showHeader'>
<div class="navContent">
<a href="http://localhost:7138/#!/login">Logout</a>
<input class='searchNav' type="button" name="button" value="Search" ng-click='searchForItem()' >
<input id='getUserInput' type="text" placeholder="Search Item" ng-model='userSearch'/>{{ userSearch }}
</div>
<h1 class='greetUser'>Welcome {{userNameNav}}</h1>
</div>
</div>
<ng-view></ng-view>
</div>
</body>
</html>In the HTML document, I aim to capture the input value from the user when they click on the search button. Despite being able to log 'search button clicked' in the console, I encounter difficulty obtaining the value entered into the search box. I attempted to use vm as well but it was unsuccessful, thus I removed it.