AngularJS Example

by Shantanu Kulkarni

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <select ng-model="tipost" 
        ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br>
</select>
<br><br>
<select class="selectpicker" data-live-search="true" >
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
    <option>Arkansas </option>
    <option>California </option>
    <option>Colorado </option>
    <option>Connecticut </option>
    <option>Delaware </option>
    <option>Florida </option>
    <option>Georgia </option>
    <option>Hawaii </option>
    <option>Idaho </option>
    <option>Illinois Indiana </option>
    <option>Iowa </option>
    <option>Kansas </option>
    <option>Kentucky </option>
    <option>Louisiana </option>
    <option>Maine </option>
    <option>Maryland </option>
    <option>Massachusetts </option>
    <option>Michigan </option>
    <option>Minnesota </option>
    <option>Mississippi </option>
    <option>Missouri </option>
    <option>Montana Nebraska </option>
    <option>Nevada </option>
    <option>New Hampshire </option>
    <option>New Jersey </option>
    <option>New Mexico </option>
    <option>New York </option>
    <option>North Carolina </option>
    <option>North Dakota </option>
    <option>Ohio </option>
    <option>Oklahoma </option>
    <option>Oregon </option>
    <option>Pennsylvania Rhode Island </option>
    <option>South Carolina </option>
    <option>South Dakota </option>
   ...

CSS

</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css"/>
<style>

JavaScript

var myApp = angular.module('app', [])
myApp.controller("ParentCtrl", ParentCtrl);
function ParentCtrl($scope){
       $scope.tipall = [
             {"ID":"1", "TIPIS":"GroupName1", "DESC":"name"},
             {"ID":"2", "TIPIS":"GroupName1", "DESC":"name1"},
             {"ID":"3", "TIPIS":"GroupName2", "DESC":"name2"},
             {"ID":"4", "TIPIS":"GroupName1", "DESC":"name3"},
        ];
        $scope.Farm = [
        	{"Type":"Orange","NSX":"Group1"},
          {"Type":"Apple","NSX":"Group1"},
          {"Type":"Grape","NSX":"Group1"},
          {"Type":"Flower","NSX":"Group2"}    
        ];
        
        $scope.checkVal = function() {
        	alert($scope.abcd);
        	console.log($scope.abcd);
        }
}