I've just started learning AngularJS and have a trouble understanding why this keyword is needed in this piece of code
var app = angular.module('confusionApp', []);
app.controller('menuController', function() {
var dishes =
[{name: 'Uthapizza'},
{name: 'Zucchipakoda'},
{name: 'Vadonut'},
{name: 'ElaiCheese Cake'}];
this.dishes = dishes;
});
Markup:
<div class="row row-content" ng-controller="menuController as menuCtrl">
<div class="col-xs-12">
<ul>
<li class="media" ng-repeat="dish in menuCtrl.dishes">
<div class="media-left media-middle"></div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
Why can't the controller just access the dishes object without the 'this.dishes = dishes;'
statement