HTML Modal Title attribute AngularJS

Question

I am trying to dynamically set the Title of a 'modal' view using AngularJS (the title should change with respect to some selected user). The HTML is of the form

<modal  title="modalRolesTableTitle" visible="showModalRolesTable"> SOME CONTENT</modal>

In my AngularJS file I have declared both scope variables

$scope.showModalRightsTable = false;

$scope.modalRolesTableTitle = null;

and the visible attribute works fine. The modalRightsTableTitle variable is being assigned correctly (firebug).

I was hoping someone could explain functionality wise why the visible attribute binds and the title does not and perhaps provide a solution.

Also I have tried ng-attr-title="modalRolesTableTitle" without success (It just displays the text 'modalRolesTableTitle' ).

Answer 1

Always use expression for binding.

<modal  title="{{modalRolesTableTitle}}" visible="{{showModalRightsTable}}"> SOME CONTENT</modal>

See example

If you are using AngularJS 1.1.4 and above then you can use ng-attr-title

See this stackoverflow post

Answer 2

It's very work around but maybe this solution can be appropriate for you:

var myEl = angular.element( document.querySelector( '#myModal' ) );
myEl.attr('title',"My tooltip");

of course you have to set:

<modal id="myModal"  title="" visible="{{showModalRightsTable}}"> SOME CONTENT</modal>