Angular Chosen

by Fma_

HTML

<script src="https://code.angularjs.org/1.5.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.4.0/angular-chosen.min.js"></script>
<div id="content" ng-app="myApp" ng-controller="mainController">
  <form name="mainform" id="saveForm" action="">
    <div id="fromuser">
      <table width="100%" id="userTable">
        <tr id="ReportNamrRow">
          <td class="label-cell">* Report Type :</td>
          <td>
            <select name="rname" id="rname" ng-model="rname" ng-init="rname=reportsValuesOptions[0]" ng-options="report as report.value for report in reportsValuesOptions track by report.name" chosen>
            </select>
          </td>
        </tr>
      </table>
    </div>
  </form>
  <pre>{{rname}}</pre>
</div>

JavaScript

var myApp = angular.module('myApp', ['localytics.directives']);

myApp.controller('mainController', function($scope, $rootScope) {
  $scope.reportsValuesOptions = [{
    'name': 'Cash Position Report',
    'value': 'Cash Position Report'
  }, {
    'name': 'Detail Report',
    'value': 'Detail Report'
  }, {
    'name': 'Reconciliation Report',
    'value': 'Reconciliation Report'
  }, {
    'name': 'Summary Report',
    'value': 'Summary Report'
  }, {
    'name': 'Sweep Report',
    'value': 'Sweep Report'
  }, {
    'name': 'FCCS/FBPS Detail Report',
    'value': 'FCCS/FBPS Detail Report'
  }, {
    'name': 'CustomReport',
    'value': 'Custom Report Name'
  }];
});