I am in the process of developing a pagination directive. Once the total_for_pagination data is filled, the appropriate HTML for the pagination gets generated.
Here's my current HTML structure with a maximum of 50 per page:
<pagination data-number="{{ total_for_pagination }}" data-max="50"></pagination>
Now, let's take a look at my custom directive:
link: function(scope, element, attrs){
scope.$watch(function(){return attrs.number;}, function(){
//A watch is needed because a database query determines the number of elements to paginate.
var page_element = '<ul>';
for(var i = 0; i*attrs.max<attrs.number; i+=1){
page_element += '<li class="pagination"><a ui-sref="users({start: '+i*attrs.max+', end: '+((i*attrs.max)+(attrs.max-1))+'})">'+i+'</a></li>';
}
page_element += '</ul>';
element.append(page_element);
});
}
It seems that although the generated HTML looks correct upon inspection, clicking on the ui-sref link does not change the state. However, when I directly place the same code it works fine.
What could be causing this issue? Thank you!