I am having issues binding my search term in my nav bar to a controller variable as it must be out of scope. In my partial navbar hmtl, I am trying to use ng-model to bind the input value to my controller variable.
my (partial hmtl) navbar:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Title </a>
</div>
<div class="navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" align="right" ng-model="keyword">
</div>
<button type="submit" class="btn btn-default" align="right">Submit</button>
<a class="btn btn-default" href="advanced-search.html">Advanced Search</a>
</form>
</div>
</div>
</nav>
and my controller:
app.controller('NavBarController', ['$scope',
function($scope) {
$scope.keyword = "";
}])
and my view that I am including the partial html navbar in (and also trying unsuccessfully to print out the value in the search bar):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="csv-import.controller.js"></script>
<script src="nav-bar.controller.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app=gcImageApp>
<div ng-controller="NavBarController">
<div>
<div ng-include src="'navbar.html'"></div>
</div>
{{keyword}}
<br>
<br>
<form ng-controller="CsvImportController">
<input type="file" file-input="files" multiple />
<button ng-click="upload()">Upload File</button>
<li ng-repeat="file in files"> Name: {{file.name}}   Size: {{file.size / 1000}} KB</li>
</form>
</div>
</body>
