Using $scope in Angular - angularjs

Question

I have a simple problem that I can't seem to figure out. I am new to angular.js and am trying ui.router. My web application is a table that displays JSON data.
The columns are all of the keys in a single JSON object, and the rows are the values for each respective key. I would like to do something like the following:
go to www.xyz.com/keyname,
and see all of the values for keyname.
However, I got stuck in trying to get the keys.
The keys are defined in a controller which is passed the data via a factory. I was then thinking I would do something like this:
var app = angular.module('SortingTables', ['ui.bootstrap', 'ui.router']);
app.factory('dataTable', function () {
return tastyJSONData;
});
app.controller('Ctrl', ['$scope', 'dataTable', function ($scope, dataTable) {
$scope.dataTable = dataTable;
$scope.columns = the keys in dataTable;
}]);
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
// pseudocode
for every column in $scope.columns in Ctrl
$stateProvider.state(column)...
}]);
However, I can't access the scope within the controller which contains the data. Am I missing something?
The config runs before the factory, so how can I access the data made by the factory in my config?

Answer 1

I believe it is best practice to keep all logic within the controller. Maybe go for something along the lines of:
app.controller('Ctrl', ['$scope', '$stateProvider', 'dataTable', function ($scope, $stateProvider, dataTable) {
$scope.dataTable = dataTable;
$scope.columns = the keys in dataTable;
// pseudocode
for every column in $scope.columns
$stateProvider.state(column)...
}]);
And then just leave your config for routing purposes
app.config(['$urlRouterProvider',function ($urlRouterProvider) {
//routing
}]);
Hard to say for sure without complete code. Hope this helps!

Answer 2

I think defining explicit states is making things harder than is required.
Try something like this:
.state('keys', {
url: '/',
resolve: {
keys: ['$http', function($http {
return $http.get('/api/keys');
}]
},
controller: function($scope, keys) {
$scope.allKeys = keys;
}
})
.state('keys.detail', {
url: '/:keyname',
controller: function($scope, $stateParams) {
$scope.keyname = $stateParams.keyname;
}
})
and in your view for 'keys' state something like:
<li ng-repeat="keyname in allKeys">
<a ui-sref="keys.detail({keyname: keyname})">{{ keyname }}</a>
</li>