I'm currently working on integrating angular selectpicker into my project.
Initially, everything was displaying correctly as shown below:
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
The selectpicker showed the title of the first option perfectly. However, when I added the ng-model directive, it started showing "Nothing selected" which is not what I wanted.
Does anyone have any suggestions on how to resolve this issue?
HTML
<html ng-app="selectDemoApp">
<body>
<div role="main">
<div class="container">
<section ng-controller="SelectCtrl">
<div class="page-header">
<select class="selectpicker" ng-model="changeState" ng-change="go(changeState)">
<option value="https://google.com">Mustard</a>
</option>
<option value="/2.html">Ketchup</a>
</option>
<option value="/3.html">Relish</a>
</select>
</div>
</section>
</div>
</div>
</body>
</html>
JS
angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
function SelectCtrl($scope, $location) {
$scope.go = function ( path ) {
alert(path)
};
}