Data binding for dynamically introduced Angular controller

Question

I am an angular beginner & trying to introduce angular in a legacy application. The page structure looks like this

<html ng-app="demoApp">
    <div class="static-parent">
        <div class="dyanamic" ng-controller="SimpleController">
            <ul>
                <li ng-repeat="cust in customers">
                   {{cust.name}} - {{cust.city}}
                </li>
            </ul>
        </div>
    </div>
</html>

The "dyanamic" div is added to dom when a certain button is clicked.

As this controller div is being added dynamically, i tried to load angular afterwards by calling angular bootstrap

angular.bootstrap(document,['demoApp']);

After running the above statement,

3 Li elements are getting created in the dom
But no data is being seen on the web page. The Li elements are empty

>> angular.element(".dynamic").scope().customers;

returns 3 customer objects as expected.

>> angular.element(".dynamic").scope().$apply();

did not help either.

Can you please suggest where I am going wrong? Tried other answers on stackoverflow but didn't seem to help.

Controller code:

    //setting up controller
    var demoApp = angular.module("demoApp", []);
    var controllers = {};
    controllers.SimpleController = function($scope){
        $scope.customers = [{name:'dave', city:'auckland'},{name:'abe', city:'City2'}, {name:'ram', city:'City3'}];
    };
    demoApp.controller(controllers);

Code for adding the div dynamically:

var template = Handlebars.compile( $("#template-content-content-container").html() );
$("static-parent").html(template(data));
angular.bootstrap('.page .row', ['demoApp']);

Angular version: 1.0.6

On 1.2.28, calling angular.bootstrap(document,['demoApp']) or angular.bootstrap('.dynamic',['demoApp']);`

is giving

Error: error:btstrpd App Already Bootstrapped with this Element

Following is the browser screenshot -

enter image description here

This doesn't answer your question but is there any reason you're using v1.0.6? Could you also include the Controller code. — dcodesmith, Dec 27 '14 at 13:42
@dcodesmith no specific reason for using 1.0.6. 1.2.28 is giving me new errors. — ykay, Dec 27 '14 at 14:19
You can't bootstrap your angular app in 2 places. It's either `angular.bootstrap(document,['demoApp'])` or `` — dcodesmith, Dec 27 '14 at 14:21
I am not calling both of them. Calling any of those two is resulting in that error which is surprising me. As it is a dynamic element that was just added. In fact, I am doing those calls on browser console. Please correct me if I am making a mistake somewhere — ykay, Dec 27 '14 at 14:54
Could you please create a jsfiddle for this, including the click event. So we can have a more holistic view. — dcodesmith, Dec 27 '14 at 14:58

score 0 · Answer 1 · edited May 23 '17 at 11:51

Please, check the third (accepted) answer to this: Angular bootstrapping after load of html (direct link: Loading an AngularJS controller dynamically)

I think, you have to "compile" anything, which is added after a first 'bootstrap' call

Also, I've made this fiddle yesterday to describe my trouble, I think it fits yours.

http://jsfiddle.net/21neg0ox/

    var app = angular.module('app', []);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

//c1
app.controller('c1', ['$scope', '$compile', c1Fn]);
app.controller('c2', ['$scope', '$compile', c1Fn]);

function c1Fn($scope){
    $scope.isAlive = 'is alive';
}
setTimeout(wtf, 500);

function wtf(){
    var myLovelyHTML = '<div ng-controller="c2">c2 {{isAlive}}</div>';

    document.getElementById('c2-wrap').innerHTML = myLovelyHTML;    
}

Data binding for dynamically introduced Angular controller

1 Answers1