Angular Chosen

by Kunal Paul

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>
<html ng-app="myApp">
<body>
	<div id="content" 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='CustomReport'" ng-options="key as value for (key , value) in reportsValuesOptions track by key" chosen>
								<option value="">---Select---</option>
							</select>
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
</body>
</html>

JavaScript

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

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