AngularJS controller not working

Question

I have AngularJS v1.2.19. I try use in my project

in body tag I wrote

<body ng-app="commentApp">

in page for calling controller I use

<div ng-controller="CommentLstCtrl">
    @{ Html.RenderPartial("Partial/CommentList", @Url.Action("Comments", "News")); }
    @{ Html.RenderPartial("Partial/CommentForm"); }
</div>

In js file I wrote

$(document).ready(function () {
    var url = $("#comments").attr("data-source");
    var id = $(".news-post").attr("data-id");
    var app = angular.module('commentApp', []);

    $.ajax({
        url: url,
        data: { newsId: id },
        type: "POST",
        dataType: "json",
        success: function (data) {


            app.controller("CommentLstCtrl", function ($scope) {
                $scope.comments = [
                    {
                        'text': 'Fast just got faster with Nexus S.'
                    },
                    {
                        'text': 'The Next, Next Generation tablet.'
                    },
                    {
                        'text': 'The Next, Next Generation tablet.'
                    }
                ];
            });
        }
    });
});

But code not working. When I debug this code, I saw that not come in body controller. And I can't understand why?

why are you wrapping the angular app using jquery in the first place? — pedrommuller, Jul 14 '14 at 14:32
this approach is so wrong...you really need to go through this thoroughly **[how-do-i-think-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background)** — charlietfl, Jul 14 '14 at 14:38

score 1 · Accepted Answer · answered Jul 14 '14 at 14:36

1) Move

app.controller("CommentLstCtrl", function ($scope) {
            $scope.comments = [
                { 'text': 'Fast just got faster with Nexus S.' },
                { 'text': 'The Next, Next Generation tablet.'  },
                {  'text': 'The Next, Next Generation tablet.' }
            ];
});

outside of ajax call.

2) Use angular.bootstrap(document.querySelector('body'), ['commentApp']) to start application once ajax call succeeds

3) Show rendered content of your partial views. It is happening on the server side, not in the browser.

AngularJS controller not working

1 Answers1