Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <div class="dropdown-container" ng-class="{ show: listVisible }"> <div class="dropdown-display" ng-click="show();" ng-class="{ clicked: listVisible }"> <span ng-if="!isPlaceholder">display</span> <span class="placeholder" ng-if="isPlaceholder">placeholderlt</span> <i class="fa fa-angle-down"></i> </div> <div class="dropdown-list"> <div> <div ng-repeat="item in list" ng-click="select(item)" ng-class="{ selected: isSelected(item) }"> <span></span> <i class="fa fa-check"></i> </div> </div> </div> </div>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.names1 = ['Sachin', 'Dhoni', 'Virat', 'Dravid'];
  $scope.names2 = ['Shoaib', 'Malik', 'Irfan', 'Sarfraz'];

  

  $scope.indiaDropDown = function() {
    var dropdown = document.getElementById('indiaselect');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
  }
	
	$scope.pakDropDown = function() {
    var dropdown = document.getElementById('pakselect');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
  }
}