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

Answer 1

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.