Change attribute of custom directive

I have custom directive to load pages inside a div

.directive('page', function () {
    return {
        templateUrl: function (elem, attr) {
            return 'pages/page-' + attr.num + '.html';
        }
    };
});

here is the dom representation of the custom directive

<div page num="{{pageNo}}"></div>

Here i want to change the page number from the controller.

Directive works fine if the value added directly

<div page num="1"></div>

As you want the interpolated value of pageNo inside your directive, You cant get that value inside the templateUrl function. You need to use ng-include directive to get the value of scope name inside your directive.

Markup

<div page num="{{pageNo}}"></div>

Code

app.directive('page', function() {
  return {
    scope: {
      num: '@'
    },
    template: '<div ng-include="\'pages/page-\'+ num + \'.html\'"></div>'
  };
});

Working Plunkr