title: Using angular directive to watch for change values with bootstrap-select
body: <p>I am new to angular and after having researched for 2 days, I still haven't come up with a solution that will work yet. </p>
  
  <p>I have a select item that will have its options updated and am also using bootstrap-select.js. I can get either or to work on their own (angular items updating dynamically as expected in a standard select list or the bootstrap-select item to work with static options). If someone could provide some guidance as to what I am doing wrong, it would be greatly appreciated! Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
  &lt;div ng-controller="ctrl"&gt;
  &lt;selectpicker data-array="users" data-selected="info.selected"&gt;&lt;/selectpicker&gt;
  &lt;button ng-click="add()"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('ctrl', ['$scope', function($scope)
  {
      $scope.info = {selected: 1};
      $scope.users=[];
      $scope.users.splice(0);
      $scope.users = [{name: "Bob", id: "1"},{name:"Tom", id: "2"}];
  
       $scope.add = function () {
              $scope.users.push({name: "John", id: "3"});
       };      
  }]);
  
  app.directive('selectpicker', function($timeout)
  {
    return {
        restrict: 'E',
        replace:true, 
        scope: {
            selected: '=',
            array: '=',
            class: '='
        }, 
    template: '&lt;select class="selectpicker" multiple data-selected-text-format="count" ng-model="currentName" ng-options="user.name for user in array"&gt;' +
        '&lt;/select&gt;',
        replace:true,
        link: function(scope, el, attrs) {
            $timeout(function () {
             scope.$watch('array', function (newVal) {
  
                 console.log(scope.array);
                 var select = $(el).selectpicker();
                select.change(function(evt) {
                    var val = $(el).selectpicker('val');
                    $scope.selected = val;
                    $scope.$apply();
                });             
            }, true);     
            });
        }           
    };      
  });
  </code></pre>
  
  <p>So when I click the Add button, I can see the scope.array value</p>
  
  <p>updates from the console output, but the dropdown itself won't update. I've tried piecing together solutions from similar answers but nothing has yielded results so far. </p>