When using angularJS 1.3, the following code snippet showcases the functionality:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script type="text/javascript">
var app = angular.module("sample", []);
app.controller("emp", function(){
this.Name = "jag";
this.sal = "4500";
this.getAnnualSal = function(){
return (this.sal) * 12;
}
});
</script>
</head>
<body ng-app="sample">
<div ng-controller="emp as o">
Hello {{o.Name}}, your annual salary is {{o.getAnnualSal()}}
</div>
</body>
</html>
The usage of getAnnualSal as a controller instance member may seem odd. Each instance of the emp controller has its own specific getAnnualSal method.
The scope of the emp controller instance can be visualized like this:
https://i.sstatic.net/D3lWB.png
If it is more logical to maintain getAnnualSal as prototype members, please provide the syntax for doing so.