AngularJS Hello World Ctrl

by rmohan

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/css/bootstrap-select.css.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/js/bootstrap-select.js.map"></script>
<div ng-app="">
  <div ng-controller="MyCtrl">
      {{test}}
        <select ng-model="item"  data-style="btn-inverse" class="selectpicker"  ng-options="item.code as item.name for item in items">
                 <option value="">Select Service</option>
        </select>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/js/bootstrap-select.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/js/bootstrap-select.js.map">
</script>
   <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/css/bootstrap-select.css">
<link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.4/css/bootstrap-select.css.map">
<style>

.ng-invalid { 
    border: 1px solid red; 
}

JavaScript

function MyCtrl($scope) {
  $scope.test = 'Test';
  $scope.items = [{ code : 'test',name: "Peter F. Hamilton"}, { code : 'test1',name: "Alastair Reynolds"}, { code : 'test2',name: "Isaac Asimov"}];
}