Trying to pass data between controllers in AngularJS

Question

I was trying to follow this video on factories in order to pass data between controllers in AngularJS, but something isn't quite working.

While I do not have the JSON file coming in yet, I'm using a hard-coded version for testing purposes.

I have a NavController that is in charge of populating links on the navigation menu. And then I have a TableController that is in charge of taking data from this to-be JSON file and creating a table of it. These two controllers are independent of each other, which is fine, but now I'd like to change it so that some of the links in my nav menu can impact the view of the table, filtering and hiding various elements. I'd also like to include a search bar under the nav controller to search through posts in the table, which won't work unless it's somehow tied to the data.

I tried taking a small amount of data and loading it into a factory:

data.js

var app = angular.module('AppName', []);
app.factory('DataFactory', function(){
    return [{'title':'title',
        'A': '1',
        'B': '2',
        'C': '3',
        'D': '4',
        'E': '5',
        'F': '6';
        },
        {'title':'title',
        'A': '1',
        'B': '2',
        'C': '3',
        'D': '4',
        'E': '5',
        'F': '6';
        };
});

But now I'm trying to load that DataFactory into my NavController and TableController and it's not working.

NavController.js

app.controller('NavController', ['$scope', DataFactory, function($scope){
$scope.links = [
    {'name':'About',
    'URL': '#/about',
    },
    {'name':'Active',
    'URL': '#/active',
    }
];

$scope.data = DataFactory; //This part doesn't seem to be working.

}]);

TableController.js

app.controller('TableController', ['$scope', DataFactory, function($scope){
    $scope.tablecontent = DataFactory; //Not working
}]);

I'm just unsure where I'm going wrong and why my data isn't being passed over to my controllers. Once I have the data, I am also concerned on how to access the individual parts. Would I still simply use

ng-repeat='content in tablecontent' ... {{content.title}} ... ?

Answer 1

You are not injecting it properly:

['$scope', DataFactory, function($scope){

should be

['$scope', 'DataFactory', function($scope, DataFactory){

---

_{Not to mention that you are missing a ] in your DataFactory return value.}