title: Angular ui.bootstrap pagination - current page not updating/watch not working
body: <p>I have a <code>pagination</code> inside a <code>dialog</code> both directives are of <code>ui.bootstrap</code>. The problem is that the <code>$watch</code> is not working for currentPage member.</p>
  
  <p>Now, the similar code works perfectly fine for other pages where pagination is not inside some dialog.</p>
  
  <p>I suppose this problem is related to <code>$scope</code> but then <code>currentPage</code> is available in the scope and i can display it on the template using <code>{{currentPage}}</code></p>
  
  <p>Please find the code in the <a href="http://plnkr.co/edit/bam4QBZRIwRuXqhK8W0p?p=preview" rel="noreferrer"><strong>plunker</strong></a></p>
  
  <p><em><code>$scope.$watch('currentPage')</code> is not firing up on clicking page links.</em></p>
  
  <p>Now, for the workaround I could use callback <code>on-select-page</code> provided by the pagination directive. </p>
  
  <p>e.g.</p>
  
  <pre><code>&lt;pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"&gt;&lt;/pagination&gt;
  </code></pre>
  
  <p>and inside my controller i can have,</p>
  
  <pre><code>$scope.pageChanged = function(page) {
    console.log(page);    
  };
  </code></pre>
  
  <p>But I rather need to understand why in such cases <code>$scope.$watch</code> wont work.</p>
  
  <p>Update: 
  From the console following is the watchers value</p>
  
  <pre><code>$$watchers: Array[1] 
  0th: Object
    eq: false
    exp: "currentPage"
    fn: function (o,n){}
  </code></pre>