I am a beginner in the world of AngularJS and I have come across two different examples when it comes to creating a controller. However, the one that is more commonly used doesn't seem to be working for me.
The problem with the first example is that it either cannot locate the module or the function, resulting in displaying just {{type}} {{name}} on the screen. Interestingly, when I try it on Plunker, the first example works fine.
'dataControl' is not a function, got undefined
This is the error message I am encountering.
If my HTML looks like this:
<html ng-app>
<head>
</head>
<body ng-app="docsBindExample">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../scripts/controllers/main.js"></script>
<div ng-controller="dataControl">
<select id="selected" ng-model="type">
<option>Total Revenue</option>
<option>Total Expenditure</option>
<option>Total Number of Events</option>
<option>Amount of Mail</option>
<option>Average Delivery Times</option>
<option>Critical Routes</option>
</select>
{{type}}
{{data}}
<ul>
<li ng-repeat="values in data">
{{values.dataName}}
{{values.dataValue}}
</li>
</ul>
</div>
</body>
</html>
And then there's the first controller that isn't functioning as expected:
angular.module('docsBindExample', [])
.controller('dataControl', ['$scope', function($scope) {
$scope.name = 'Value Is here';
}]);
On the other hand, there's the second controller which seems to work smoothly:
function dataControl ($scope) {
$scope.name = 'Value Is here';
}
Are there any drawbacks to using the second approach?