Angular bootstrap multi-selectpicker component not shows tick marks on options after model change

Question

I am using Angular Bootstrap Selectpicker.

I am using angular version 1.4.7. For select picker they provide directive,

angular.module('angular-bootstrap-select', [])
.directive('selectpicker', ['$parse', function ($parse) {
return {
  restrict: 'A',
  require: '?ngModel',
  priority: 10,
  compile: function (tElement, tAttrs, transclude) {
    tElement.selectpicker($parse(tAttrs.selectpicker)());
    tElement.selectpicker('refresh');
    return function (scope, element, attrs, ngModel) {
      if (!ngModel) return;

      scope.$watch(attrs.ngModel, function (newVal, oldVal) {
        scope.$evalAsync(function () {
          if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
          element.selectpicker('refresh');
        });
      });

      ngModel.$render = function () {
        scope.$evalAsync(function () {
          element.selectpicker('refresh');
        });
      }
    };
  }

};
}]);

Select picker looks like

<select class="form-control" data-style="btn-default"
            data-live-search="true" selectpicker multiple
            data-selected-text-format="count>2"
            data-collection-name="users"
            ng-model="selectedUsers"
            ng-options="user.name for user in users">
    </select>

Above case, selectedUser will have tickmarks and If I change value for selectedUsers from controller. It not show tick marks for updated selectedUsers options.

When I select multiple options it shows tick mark for selected options. Then if I refresh view then though ng-model have previous values still it don't show tick mark for values in ng-model.

Plunker

Answer 1

I simplified your code to work. Check this Demo

.directive('selectpicker', ['$parse', selectpickerDirective]);

function selectpickerDirective($parse) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {

        //New change
        scope.$watch(attrs.ngModel, function(n, o){
          element.selectpicker('val', $parse(n)());
          element.selectpicker('refresh');
        });

    }
  };
}

Answer 2

EDIT 1

Look this: http://plnkr.co/edit/4TiSJwKtcln9z39cxHZ3?p=preview

The library bootstrap-select is compatible with jquery, but not compatible with angular. For this you can got it utilizing advanced artifice of programmer. rsrsrs. Look in my example. I simulate click of user in element.

angular.element("li[data-original-index='1']").find("a").click();

EDIT 2

Change selectpickerDirective to:

function selectpickerDirective($parse) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {
        scope.$watch(attrs.ngModel, function(n, o){
          if(n)
             element.selectpicker('val', ["string:" + n[0].name]);
          element.selectpicker('refresh');
        });

    }
  };
}