AngularJS - directive components dropdown not getting initialized for edit - angularjs

Question

I am new to Angular JS.
What I am trying to do is create a reusable component using Directive. As of now it just has one drop-down. While doing Add the drop-down is getting populated with the values in permissionValues array and binding with the empty model with the selected value is happening. But when I try to Edit the drop-down is not getting initialized with existing model value value.
The directive code.
directive('userPermissions', function() {
return {
restrict: 'E',
template:'<div><select ng-model="ngModel" ng-options="abc [optValue] as abc [optDescription] for abc in array"></select>{{tab}}</div>',
replace: true,
transclude: true,
scope:{ ngModel: '=', tab:'='},
link: function (scope, element, attrs) {
scope.optValue = attrs.optValue;
scope.optDescription = attrs.optDescription;
scope.$watch(attrs.array, function(newVal, oldVal){
if(newVal != oldVal){
scope.array = newVal;
}
});
}
};
});
The HTML code
<user-permissions tab="tab"
ng-model="newUser.canCheckout1"
array="permissionValues"
opt-value="value"
opt-description="label"></user-permissions>
in main controller
$scope.permissionValues = [{label:'Standard', value:'true'},{label:'Restricted', value:'false'}];
As you can see I have add "tab" for testing. I am changing the value of tab on load function which is getting called when I click on Edit. New value of tab is getting printed but the drop-down is not getting initialized.

Answer 1

You're trying to two-way bind your array attribute from the controller using:
scope: {array: '=' ... }
The problem is that you don't have any $scope.array in your controller. So you need to somehow link the two. try this:
link: function(scope, element, attrs){
scope.optValue = attrs.optValue;
scope.optDescription = attrs.optDescription;
scope.array = scope.$eval(attrs.array);
}
This will work but wouldn't create dynamic binding. It will only read the value once and then it won't be updated if the scope[attrs.array] ever changes. In order to do that, you'd have to do a $watch to listen for changes:
scope.$watch(attrs.array, function(newVal, oldVal){
if(newVal != oldVal){
scope.array = newVal;
}
});
Hope that helps.
UPDATE:
To clarify, there are multiple ways to do this, so its up to you for how you want to do it. But the idea behind the scope: { ... } binding in a directive is that you're specifying which properties of the scope you want to be bound and how you want them bound (one-way or two-way). You were telling angular to bind the $scope.array property from your controller into your directive. But because there wasn't any $scope.array property, nothing was being bound. So you can either change your binding to say scope: {permissionValues: '='} or you can change your $scope.permissionValues in your controller function to be $scope.array. Either should work.
But since you're trying to use the array="permissionValues" attribute on your directive to signify which $scope property to use, I figured you would want to do it the way I specified above. Using scope.$watch means you don't have to use any scope: { ... } binding at all. The $watch function manually creates that binding for you and allows you to use the attrs.array value to dynamically bind to the proper scope parameter at runtime. Using scope: {} requires that you know what the scope property is called when the directive is created, and not when it is read from the DOM.
Does that make more sense?