Models and views
In AngularJS, a model could be a primitive, a hash table, or a JavaScript object. The data from the model can be displayed in the view using the {{ }} expression.
Models can be defined in multiple ways. Like we saw in the first example, we can define the model within the ng-init directive. It can be created in the template within the expression as follows:
<button ng-click="firstName='John Doe' ">click </button>
Alternatively, it could also be created within a controller using the scope, which is the ideal way to do it. Refer to the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Model in Scope</title>
</head>
<body ng-controller="PeopleController">
{{person.name}} lives in {{person.city}}
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PeopleController($scope) {
$scope.person = {
name: "John Doe",
city: "New York"
}
}
</script>
</body>
</html>In the preceding example, we created a controller called PeopleController and defined the model person, which is storing the data as a hash table. The $scope is an AngularJS object that is able to reference the JavaScript object model as a property.
