grails - Sprinkling in AngularJS into existing jQuery heavy application -

i have jquery heavy application written in grails 2.2.0. large piece of application single page app , i've been doing point pulling in required html div via $.load().

i'm starting add angularjs app because think i'd replace majority of pure jquery angularjs i'm hitting issue.

if include script tag pull in angularjs in main layout file , page want perform angularjs functionality on pulled in via $.load() @ point, angularjs doesn't seem bootstrap itself.

however, if put script tag pulls in angularjs in html fragment being pulled in via $.load() works fine.

is there reason don't quite understand angularjs yet? test code i'm using quite simple, , can viewed in jsfiddle.

the html:

<div ng-app="attributeapp">     <div ng-controller="attributectrl">         <input type="text" ng-model="master.name" />         <div>{{master.name}}</div>     </div> </div> 

the javascript:

var app = angular.module("attributeapp", []);  app.controller("attributectrl", function ($scope) {     $scope.master = {         name: "some name"     }; }); 

i able jsfiddle work here: http://jsfiddle.net/sypqn/

here js modified bootstrapping scenario work:

angular.module("attributeapp", []) .controller("attributectrl", function ($scope) {     $scope.master = {         name: "some name"     }; });  console.log("angular: %j", angular); console.log("ra: %j",  rootapp);     angular.bootstrap(rootapp, ['attributeapp']); 

i removed ng-app="module" part in dom because think isn't necessary , potentially confusing. replaced named div id , bootstrapped app based on id of element.