Angular Element's Scope not working as expected

I have an existing single page web app built as a roll-your-own jQuery app. I'm trying to incorporate angularjs but I'm running into some trouble.

I have some HTML links that I want to have jQuery register click handlers for, but have those links dynamically load an angular view into the DOM. Please see this plunk of what I'm trying to do. If I use ng-click (the Page 2 link), it works fine. However, I don't want to use ng-click because I want to execute my roll-your-own SPA routing code I wrote before employing angular. I was hoping to get the scope dynamically and trigger the same function that ng-click is triggering, but it's not working:

<a id="aPage1" href="#">Page 1 Is Not Working</a>
<a ng-click="nav('page2.html')" href="#">Page 2 is working with ng-click</a>

$('#aPage1').click(function(e) {
  // This triggers the correct function, but that function doesn't behave correctly

app.controller('HomeController', ['$scope', function($scope){
   $scope.nav = function(page) {
     // This line only appears to work when called by ng-click
     $scope.template = page;

If you debug the nav function inside of HomeController, the scope variable is set, and in fact, it looks to me to have the same properties as when it's triggered from ng-click, however binding doesn't work. What am I doing wrong?

Thanks for your help!



Although I do not encourage you to build a jquery app that;s using a feature of angular, you should know that any scope modification done without using one of angular's methods (such as watchers, ng-event directives ...) is not updated in the view. To force angular to update the bindings, you should use $scope.$apply() .

Need Your Help

redeclaring array in c++

c++ arrays initialization

I'm trying to port some C code over to C++ and an array declaration (or rather, a series of array declarations) is giving me problems. The code is organized like this: first, a global array is de...

TinyMCE stops working after parent element is removed from and re-inserted into the DOM

javascript html tinymce

I have a TinyMCE instance running inside a div, which is in a list of sortable div elements. After the container div get's removed and re-inserted back in to the dom, TinyMCE is still showing but s...