Just diving into the world of AngularJS, I've recently launched a new application but it seems like there's a crucial element missing when it comes to controllers.
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8>
<title>Spartan Roster</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="spartanApp" ng-controller="SpartanController">
<input ng-model="name">
<span>{{age}}</span>
</div>
<script>
var spartanApp = angular.module('spartanApp', []);
spartanApp.controller('SpartanController', function($scope) {
if ($scope.name == "jon") {
$scope.age = 12;
} else {
$scope.age = 1;
}
});
</script>
</body>
</html>The desired functionality is as follows: When 'jon' is entered in the textbox, the output in the browser should change to 12. Any other input should result in the output remaining as 1.
Currently, it only displays 1 and does not update when 'jon' is entered. What key aspect am I overlooking regarding controllers?