I'm trying to add data on my select menu using a controller and used ng-options while i have a class defined in my directive to insert the bootstrap-select plugin to the element. The problem is that the data in my controller didn't work, it's having conflict on my directive and i even tried using require and controller method in my directive.

Please take a look at my code:

HTML

```
<div ng-controller="CitiesController" class="form-group pull-left form-register-width-field form-register-select">
   <label for="city">City</label>
   <select id="city" ng-model="selectedItem" ng-options="item as item.name for item in cities" class="selectpicker">
     <option>Select City</option>
  </select>
</div>  

```

My controller:

```
function CitiesController($scope) {
  console.log('cities controller'); 
  $scope.cities = [
    {value:'1',name:'Angeles'},
    {value:'2',name:'Angono'},
    {value:'3',name:'Antipolo'},
    {value:'4',name:'Apalit'},
    {value:'5',name:'Arayat'},
    {value:'6',name:'Bacolod'},
    {value:'7',name:'Bacoor'}
   ];
  console.log($scope.cities[2]);
 }

```

My directive:

```
angular.module('myApp.directives', [])
.directive('selectpicker', function() {
   return {
     restrict: 'C',
     link: function(scope,el,attr,cntr) {
       $(el).selectpicker();
     }
   }
})

```

Thanks for the help :)