Getting Angularjs ng-view to work - angularjs

Question

I am trying to figure out how to build a SPA with angularjs. My routes are working and each partial page is loading in ng-view properly. I'm trying to load external json data. I had it working onnce but I can't figure out what I'm doing wrong. The goal is to list products and have a details page for each product. Any help would be greatly appreciated. Here's my code:
app.js
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider.
when('/home',{
templateUrl: 'partials/home.html',
controller: "storeCtrl"
}).
when('/about',{
templateUrl: 'partials/about.html',
controller: "storeCtrl"
}).
when('/computers',{
templateUrl: 'partials/computers.html',
controller: "storeCtrl"
}).
when('/smartphones',{
templateUrl: 'partials/smartphones.html',
controller: "storeCtrl"
}).
when('/tablets',{
templateUrl: 'partials/tablets.html',
controller: "storeCtrl"
}).
otherwise({
redirectTo: '/home'
});
}]);
myApp.controller('storeCtrl', ['$scope', '$http', function($scope, $http) {
$scope.homeHeading = 'Home';
$scope.aboutHeading = 'About Us';
$scope.computersHeading = 'Computers';
$scope.smartphonesHeading = 'Smartphones';
$scope.tabletsHeading = 'Tablets';
$http.get('products.json').success(function(data) {
$scope.products = data;
});
console.log($scope.products);
}]);
computers.html
<div ng-controller="storeCtrl">
<h1>{{computersHeading}}</h1>
<div ng-repeat="item in products">
<p>{{ item.name }}</p>
</div>
</div>

Answer 1

You should try this
$http.get('products.json').then(function(result) {
$scope.products = result.data;
});
And remove ng-controller from the view as you have already defined it in myApp.config()

Answer 2

Try to use $http.get service which returns a promise object.