$ scope is undefined
I need to skip something simple. I am getting error $ scope is not defined in plunker. Where is the mistake? I have declared a module, controller and dependencies, I cannot see where the error is.
var phonecatApp = angular.module('phonecatApp', [$scope]);
phonecatApp.controller('PhoneListCtrl', function () {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
$scope.orderProp = 'age';
});
<html ng-app='phonecatApp'>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="PhoneListCtrl">Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul></div>
</body>
</html>
+3
source to share
2 answers
try injecting scope into controller:
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
$scope.orderProp = 'age';
});
it would be better if you define your controller and then declare your module like this:
angular.module('phonecatApp').controller('PhoneListCtrl', ['$scope',
function($scope) {
}]);
working plucker:
+1
source to share