My scope apply isn't working correctly - angularjs

Question

I have tried to research this issue and have had no luck. My ng-repeat doesn't display dynamic content from the controller on the first try. I was told to use a .digest or apply to get angular to hit my page again but I am not quite clear how to implement. From the examples I saw online this should work
var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);
shopItems.controller('shopItemController', function ($scope) {
$scope.shopItems = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
trophyEarns.controller('trophyEarnsController', function ($scope) {
$scope.trophyEarns = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
Here is a snippet of the html and controller
<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItem.name }}</h2>
<div class="hff">Earn it: {{ shopItem.altprice }}</div>
<div class="hf">Buy it: {{ shopItem.price }}</div>
<div class="desc"><div>{{ shopItem.desc }}</div></div>
<div class="prog"><div>{{ shopItem.progress }}</div></div>
</div>
</div>
</div>
But this does nothing and no errors pop up. I am still forced to reload every time I leave and go back to the pages with the controllers to see the dynamic content. Am I using this correctly? Is digest better?