Dialog preventing DOM from redrawing - angularjs

Question

I have a page built in angular. The page has a set of data displayed that's paginated. I have the page searchable with a search box. The pagination is build by hand due to some custom rules about what comprises each page. But building the pagination is set in a buildPages() method, and from there it's a simple call to build the pages that directly updates the scope the page draws from.
So typically a search works like so:
Type in search.
Watcher catches the change on search.
Watcher sets search var.
Watcher calls buildPages();
buildPages rebuilds pagination and updates scope.
Scope is update, pagination and displayed data is redrawn.
Now all of this works just fine. But I needed to add in a dialog to ask the user if they want to change the search or leave it, and this dialog only appears sometimes based on certain criteria.
My problem is that if I open a dialog and call buildPages() from a button click in the dialog, it properly updates the scope, but it doesn't redraw the page.
So, for example, you have 50 pages and you're displaying page 1 of 50. You then type in a search. The search filters out 25 of those 50 pages, leaving you with 25 pages left. The page you were initially on is also filtered out. Without the dialog, typing in the search will result in you appearing on page 1/25 on the first filtered page. However, triggering the search from the dialog will still show you on page 1 of the unfiltered page, at page 1/50. Clicking next on the pagination control will properly take you to the second filtered page 2/25, and clicking back from there will properly show you on page 1/25 of the filtered pages.
Even doing something as simple as triggering a hover will cause the page to properly redraw correctly.
What's going on with this? Why is the dialog preventing the redraw?
Here's the code I'm using in my watcher (slightly simplified).
$scope.$watch('searchText', function(newVal, oldVal) {
currentSearch = newVal;
if(newVal !== oldVal){
if(displayFlag){
j$( "#dialog-confirm").dialog({
resizable: false,
width:450,
height:240,
modal: true,
buttons: {
"Search": function() {
j$( this ).dialog( "close" );
buildPages();
},
Cancel: function() {
j$( this ).dialog( "close" );
return false;
}
}});
}
else
{
buildPages();
}
}
});
I've tried including a return of either true or false in the search click. I've also tried switching the order of the dialog close and buildPages in the search click.

Answer 1

I am not sure if j$() is an angular library. It appears that it may not be.
Remember that Angular does not know about any type of events or changes except its own, therefore, if you are performing an action with jQuery or another library like that .dialog, after you performe the call, you may need to call $scope.$digest(); or $scope.$apply() to trigger the angular digest cycle.
scope.$digest() will only fire watchers on current scope, scope.$apply (recommended) will evaluate passed function and run $rootScope.$digest().
buttons: {
"Search":
function() {
j$( this ).dialog( "close" );
buildPages();
$scope.$apply(); //After function is executed a cycle will occur.
},
Cancel: function() {
j$( this ).dialog( "close" );
return false;
}
}
I believe in your situation that the view may not being updated because angular isn't being told to perform a digest cycle.