Bootstrap 3 + AngularJS - Modal example
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="SelectController">
<Button ng-click="change()" >Button</Button>
<select class="form-control" ng-model="label" ng-change="showTask()" ng-options="d.symbol as d.symbol for d in data" >
<option value="" disabled>Select Task</option>
</select>
</div>
</body>
JavaScript
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('SelectController', function ($scope) {
$scope.data = [
{ "symbol": "GOOG" },
{ "symbol": "AAPL" },
{ "symbol": "HPQ" },
{ "symbol": "CSCO" }
];
$scope.label = '';
$scope.change = function(){
$scope.label =$scope.data[2].symbol;
}
});