Scope variable not printing AngularJS

Question

I am starting to build my first single page application in AngularJS and am stuck on a simple problem. I want to be able to set scope variables 'title' and 'subtitle' to change the page header each time a user clicks a 'link'. On the main index page, the html where it should be displaying looks like this:

<div id="header">
    <h1>{{title}}</h1>
    <h3>{{subtitle}}</h3>
</div>

In the app.js file where I am doing all of my routing, I have multiple controllers that get applied depending on the url. Each of the controllers looks something like this:

app.controller('displayCtrl', function($scope, $http) {
    $scope.title = "Machine Profiles";
    $scope.subtitle = "Add, remove, and view data about machines";
    console.log($scope.title);
});

As you can see I am outputting to the console the variable that I just set, and it actually is displaying the correct thing. The problem is that the h1 and h3 tags are not displaying the scope variable! My title and subtitle in the header are blank, even though the scope variable is being set and logged. I am not getting any errors in the console on page load or when I click the links. The 'templateUrl' that I am loading in the routeProvider is displaying the content on all of the partial pages in the main container as well. JUST THE TITLES ARE BROKEN. Please help. Thanks in advance

Did you add ng-controller="displayCtrl" to your element?

Michael Kang
– Michael Kang

2014-05-30 01:12:28 +00:00
Commented May 30, 2014 at 1:12 — Michael Kang
– Michael Kang, Commented May 30, 2014 at 1:12

thedude · Accepted Answer · 2014-05-30 01:34:17Z

7

Is <div id="header"> outside of your ng-view?

If it is - that means that <div id="header"> is outside of displayCtrl's scope.

Try updating $rootScope instead of $scope.

app.controller('displayCtrl', function($scope, $rootScope, $http) {
    $rootScope.title = "Machine Profiles";
    $rootScope.subtitle = "Add, remove, and view data about machines";   
});

Make sure that <div id="header"> is inside ng-app.

answered May 30, 2014 at 1:34

thedude

3551 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dge888 Over a year ago

Thanks, it was adding rootScope that did it. In my mind, $scope was for the ng-app from top to bottom, but I guess it means just within the ng-view?

v2saumb · Accepted Answer · 2014-05-30 01:08:49Z

1

Please make sure that you have bound angular to your html page .

Try looking at this example

You can also try reformatting the controller as follows. Angular recommends inline injection annotation

app.controller('displayCtrl', ['$scope','$http', function($scope, $http) {
    $scope.title = "Machine Profiles";
    $scope.subtitle = "Add, remove, and view data about machines";
    console.log($scope.title);
}]);

answered May 30, 2014 at 1:08

v2saumb

111 bronze badge

Collectives™ on Stack Overflow

Scope variable not printing AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related