How to use Attributes of a directive in ng-model of a html tag designed in the template using Angular JS

Question

When I am trying to understand how to pull attributes and placing them in a directive, I found the following fiddler...

Here is the fiddler

Adding one more question for the above...If I want to display the below

 <div ng-model="foo">foo</div> 

How should I modify the above code. Will it work ????

 <div ng-model="{{tooltipTitle}}">{{tooltipTitle}}</div> 

Answer 1

You cannot have value as a ng-model

ng-model should always be a name which is binded to the scope of the controller.

your ng-model should be like

<div ng-model="tooltipTitleModel">{{tooltipTitle}}</div>

but as you are using it on a div it will not have any affect to your code because ng-model in actual works with input, textarea or select elements

for more details on naming and usage of ng-model please see the link below:

https://docs.angularjs.org/api/ng/directive/ngModel

Hope this resolves your question.

Answer 2

If you need to change the variable to which your input element is bound through ng-modal , you need to get it done indirectly through a watch inside the controller. You watch your modal variable for the changes and divert the value according to the state.

<input ng-modal="marks">

And in your controller:

$scope.$watch('marks', function(val){
    $scope.classReport[$scope.student] = val;
});

In the above example, the marks you input will be going to the correct student in the classReport array depending on the value of the $scope.$student .

You don't have to bind your input element directly and dynamically to each array element as you have tried in your own example.