Angular ng-bind not accessing scope variables

Question

ng-bind is not accessing the $scope variables. When the view loads the data is not rendered - it's just blank, but I can see all of the data I need to access under the "showTopic" variable in the $scope in the console. Any ideas where I'm going wrong?

The problem occurs on the topic view when I follow a change views from dashboard.html to topic.html. Both views are using the same controller.

dashboard.html

<div ng-controller="topicsController">

<h2>DASHBOARD</h2>

<button class="btn btn-danger" ng-click='getCookies()'>Cookies</button>

<div class="col-sm-8 col-sm-offset-2">
    <table class="table table-striped">
        <thead>
            <th>Category</th>
            <th>Topic</th>
            <th>Poster's Name</th>
            <th>Posts</th>
        </thead>
        <tbody>
            <tr ng-repeat="topic in topics track by $index">
                <td> <a href="" ng-click='showTopic(topic._id, $index)'> {{topic.category}} </a></td>
                <td> {{topic.topic}} </td>
                <td> {{topic.user}} </td>
                <td> {{topic.posts}} </td>
            </tr>
        </tbody>
    </table>
</div>

topic.html

<div ng-controller="topicsController">

<div class="col-sm-10 col-sm-offset-1">

    <h3><a href="">{{topicData.user}}</a> posted a topic:</h3>

    <p>Desciption: {{ topicData.description }}</p>

    <h4>Post your answer here...</h4>
</div>

topicsController.js

console.log("topicsController loaded");

app.controller('topicsController', ['$scope','topicFactory', '$location', '$cookies', function($scope, topicFactory, $location, $cookies) {


var index = function(){
                        topicFactory.index(function(returnedData){
                          $scope.topics = returnedData;
                        });
            };
index();


  $scope.add = function(){
    var user = $cookies.get('user');
    $scope.addTopic.user = user
    topicFactory.add($scope.addTopic, function(returnedData){
      index();
    })
  }

  $scope.showTopic = function(id, $idx){
    topicFactory.show(id, function(returnedData){
      $scope.topicData = returnedData.data[0];   
    })
    $location.url('/topic/' + $idx);
  }

}]);

topicFactory.js

console.log("topicFactory loaded");

app.factory('topicFactory', ['$http', function($http) {
      // The factory is nothing more than a function that returns an object
function topicFactory(){

  var _this = this;


  this.index = function(callback){
    console.log("index topicsFactory");
    $http.get('/topics').then(function(returned_data){
      topics = returned_data.data;
      console.log(topics);
      callback(topics)
    })
  }




  this.add = function(newTopic, callback){
    console.log(newTopic);
    $http.post('/topics', newTopic).then(function(returned_data){
      console.log("posted");
      callback(returned_data);
    })
  }

  this.show = function(id, callback){
    console.log("show factory");
    $http.get('/topics/' + id).then(function(returned_data){
      console.log("got show data");
      callback(returned_data);
    })
  }
}

    return new topicFactory();
}]);

And the data that I can view in the showTopic variable in scope in the console:

showTopic:Object
__v:0
_id:"57eca48afd30cea088ffdf2f"
category:"JavaScript"
date:"2016-09-29T05:20:10.878Z"
day:28
description:"Test 6"
month:9
topic:"Test 6"
user:"Test"
year:2016

Need to know about topicFactory, is there latency in data return? did you used promises? — Shankar Gurav, Sep 30 '16 at 03:41
`showTopic` is a function in the controller .. but you are using it to try to display things in the view. Also you have 2 instances of `ng-controller="topicsController"`. This question is very confusing — charlietfl, Sep 30 '16 at 03:43
Don't use the same variable name as the function...you overwrite the function and it is gone — charlietfl, Sep 30 '16 at 03:45
@RaviTeja yes, you are correct. I had {{showTopic.user}} previously, but was tried {{$parent.showTopic.user}} to see if it would work. I forgot to delete the '$' — Chad, Sep 30 '16 at 03:46
First, change function name $scope.showTopic = function(id, $idx){} to something else also update the new function name in view as well. — Ravi Teja, Sep 30 '16 at 03:53
@charlietfl I have changed the showTopic object in the scope to topicData but it still does not work. And there are two different views that use the topicsController — Chad, Sep 30 '16 at 03:54
When topic.html view renders it loads topicsController.js, but currently in this controller you are not initializing $scope.topicData. $scope.topicData is inside a function. — Ravi Teja, Sep 30 '16 at 03:58
@RaviTeja $scope.topicData is initialized because ng-click='showTopic(topic._id, $index)' runs the $scope.showTopic function. — Chad, Sep 30 '16 at 04:00
But if I understand correct, $location.url('/topic/' + $idx); changes the view. Once it changes view angular forgets all the previous data it was holding in the scope of controller and try to load topicsController again. — Ravi Teja, Sep 30 '16 at 04:03

score 1 · Accepted Answer · edited May 23 '17 at 12:06

The problem is occurring because of your view change. When you change views the scope changes as well. The scope exists in your dashboard view with correct scope variables, but is actually empty in the topic view. I know it looks deceiving because you are logging the object. So if you are changing views and want to use scope variables from another view/controller, you will want to save the object in a service and then in a controller return that object, assign the object fields to your scope variables and display it that way, which is what you are doing, but you are using the same controller for two different views. Once the second loads it becomes empty and nothing is showing.

What I suggest doing is creating two different controllers. The first to capture the topics you need, pass to service and store them, then call them in the new controller and they will display. Two different views, two different controllers, one service to access the info.

I highly suggest looking at this post and understand how to pass scopes between routes in Angular and how views affect the scope.

Angular ng-bind not accessing scope variables

1 Answers1