Cannot read property '$invalid' of undefined - angularjs

Question

I am creating a statistics page using angular.
When I submit the form it throws the error Cannot read property '$invalid' of undefined.
Here is the html:
<form name="statsForm" ng-submit="quoteRequestsKpi()" novalidate>
<div class="row">
<div class="col-lg-5">
<div class="form-group" show-errors="{ showSuccess: true }">
<label for="month">Month</label>
<select name="month" id="month" class="form-control" required="required" ng-model="statsIn.month">
<option value="0">January</option>
<option value="1">February</option>
...
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group" show-errors="{ showSuccess: true }">
<label for="year">Year</label>
<select name="year" id="year" class="form-control" required="required" ng-model="statsIn.year">
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label> </label>
<input type="submit" class="btn btn-primary form-control" value="go" />
</div>
</div>
And here is the js code :
controllers.controller('StatsController', [
'$scope', 'growl', 'appService',
function($scope, growl, appService) {
var logger = log4javascript.getLogger('Stats');
logger.debug('StatsController');
/**
*/
$scope.statsIn = {
month : null,
year : '2017'
};
/**
*/
$scope.$on(EVENT_CURRENT_USER_SUCCESS, function() {
logger.debug(EVENT_CURRENT_USER_SUCCESS);
$scope.init();
});
/**
*/
$scope.quoteRequestsKpi = function() {
logger.debug('quoteRequestsKpi');
$scope.$broadcast('show-errors-check-validity');
if ($scope.statsForm.$invalid) {
return;
}
appService.quoteRequestsKpi($scope.kpiIn).then(function(data) {
if (data.status == SUCCESS) {
$scope.quoteRequestKpis = data.quoteRequestKpis;
} else {
logger.warn('quoteRequestsKpi: ' + JSON.stringify(data));
}
});
}
$scope.ensureUserIsAuthenticated();
}]);
Does anyone know why I am getting an error ?

Answer 1

Because your form is undefined inside your controller. You have to create a reference to the form in your controller.
This could be accomplished either by using controllerAs syntax:
e.g.
In the view:
<div ng-controller="StatsController as vm">
<form name="vm.statsForm">
<!--Input Fields...-->
</form>
</div>
Controller:
var vm = this;
vm.statsForm// This is a reference to your form.
Or if you wish to inject $scope in the controller, then the answer of how to access your form can be found here.
Here's a working plunker.