Angularjs $ location.path only updates second click url

Question

The site I'm working on has a custom CMS, and I use angularjs to edit the embedded page. The database stores the HTML used to create the pages, so I cannot strictly use templates and models on the client side.

I do not use HTML5 pushState, so the urls are similar to example.com/page#/widget/1/edit or example.com/page#/widget/new and my current problem is when I submit forms for editing the widget or adding the widget, then I want the page to reload its contents by entering HTML in the DOM and changing the URL to the default value that I am trying to use with $location.path('/') .

There are several problems in my current implementation (which you will see in the demo), one of which is that in my reverse submit() image, changing $location.path changes the url when you click the button of the second form. I am also trying to change the URL that I click "Delete", and this also does not work.

http://jsfiddle.net/sZrer/1

 customPage.controller('PageEditCtrl', function($scope, $http, $routeParams, $location, $route, $compile, PageState) { var widgetId = $routeParams.id || widgetCount + 1; $scope.pageState = PageState; $scope.widget = { id: widgetId, name: 'Widget ' + widgetId }; $scope.submit = function() { if ($scope.widget.id > widgetCount) widgetCount += 1; setTimeout(function() { var element = $compile(genHtml())($scope); angular.element('#page-content').html(element); $location.path('/'); }, 100); }; }); 

Answer 1

setTimeout() doesn’t work well with Angular (Angular uses an event loop in which it checks for changes in models, but to be able to do this, it must be able to control all parts of your app; setTimeout() is out of Angular's control, and when any changes in the Angular parts of your application are made in the setTimeout -handler, usually another round of the Angular loop event is required before these changes are raised).

If you replace it with Angular's own $timeout() (be sure to add it), it will work better ( jsfiddle ).