AngularJS $scope data not rendering in view

Question

I have been struggling with this problem for the past few days, and now i believe its time to reach out to the community for some help.

I am creating a website using the MEAN stack, this is my first time using Angular JS so i am a noobie.

The problem I am having is, I am not able to render ANY $scope data in my view. this has been driving me crazy because the AngularJS chrome debugger shows that the $scope data is there!!! But it wont render in my template.

App Structure

/public
- /js
  - /controllers
    - -user.js
- -app.js
/views
- -index.html

Contents of my html - i will not copy entire file, only angular parts.

<!doctype html>
<html ng-app="PCT">

<div ng-controller="userController" class="column">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#userinfo" >                                                                             
       <img ng-src="{{user.img}}" style="width:40px; height:50px;" />
    </a>                                    
    <ul class="dropdown-menu" role="menu">                                      
        <li><strong>{{user.name}}</strong></li>
        <li><a ng-click="logOut()">Sign Out</a></li>
        <li><a href="">Admin Site</a></li>                                      
    </ul>
</div>
<script src ="js/app.js"></script>
<script src="js/controllers/user.js"></script>

Contents of my app.js

angular.module('PCT.userController',[]);
//Importing all modules into main module
angular.module('PCT',['PCT.userController']);

Contents of my user.js (Controller)

angular.module('PCT').controller('userController', ['$scope', function($scope){

    $scope.user = {
        img : 'http://path/to/usr/img/user.jpg',
        name : 'mcutalo'
    };

    $scope.logOut = function(){
        console.log('logging out');
    }
}]);

I am able to click on the Logout button in my menu, and this will trigger the console log, so it is making it to the controller. But it wont display my $scope data at all.

madhured · Accepted Answer · 2014-02-14 18:49:11Z

0

I am not sure what your question was, but if "PCT" is your module (it should match the name ng-app and the app.module("PCT") and no need to inject controller if u are defining controller using

angular.module('PCT').controller('userController', ['$scope', function($scope){

}]);

Here is the plnkr of the working one.

Updated with the Logout and it is called console.log...

http://plnkr.co/edit/uSLVqEayCh2XeeGI7LZe?p=preview

Let me know if any further help is needed.

edited Feb 14, 2014 at 18:49

answered Feb 14, 2014 at 18:14

madhured

4432 silver badges8 bronze badges

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

1 Comment

mike Over a year ago

Thanks for you response, but I found out the issue was not with my angular code. It was an issue with a config that was provided in the MEAN stack boilerplate. Also I did not know that I didn't need to include my controllers in main module if i declare them this way. So Thanks !

Collectives™ on Stack Overflow

AngularJS $scope data not rendering in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related