After assigning a collection to a source variable, I am trying to activate a third party control (bootstrap-select) using a directive that watches the assigned collection.
angular
.module('app').directive('bootstrapDropdown', ['$timeout',
function ($timeout) {
return {
restrict: 'A',
scope: {
collectionName: '='
},
require: '?ngModel',
link: function (scope, el, attrs) {
el.selectpicker();
scope.$watchCollection(scope.collectionName, function (newVal) {
$timeout(
function () {
el.selectpicker('refresh');
}
);
});
}
};
}
]);
If I specify the collection name as a string in $watchCollection, everything works properly. However, I'm attempting to create a more generic directive by passing the collection name like this:
<select bootstrap-dropdown collection-name="commandGroups" ng-model="vm.Job.CommandGroup" name="ddlCommandGroup">
<option value="">Select Something</option>
<option ng-repeat="cmdGroup in commandGroups" collection-name="commandGroups" value="{{cmdGroup.Id}}">{{cmdGroup.Name}}</option>
</select>
Unfortunately, this approach is not functioning as expected.