$dirty $valid etc. not avalabel on form directive and its form elements

1

my template:

<ion-view title="Test">
<ion-content padding="true">
    <form name="loginForm" role="form" data-ng-submit="login()" data-ng-init="init()" novalidate>
        <h3>Enter Pin</h3>
        <label class="item item-input">
            <input type="number" data-ng-model="loginForm.pin" name="pin" data-ng-minlength="4" data-ng-maxlength="4"
                   ng-focus required>
        </label>
        <div data-ng-show="loginForm.pin.$dirty && loginForm.pin.$invalid && !loginForm.pin.$focused">
            <small data-ng-show="loginForm.pin.$error.required">
                pin is required.
            </small>
        </div>
        <button type="submit" class="button button-block button-energized">
            ENTER
        </button>
    </form>
</ion-content>

My Controller:

(function (angular) {
'use strict';

angular
    .module('playportCheckoutApp')
    .controller('LoginCtrl', ['$scope', '$timeout', '$location', function ($scope, $timeout, $location) {

        $scope.init = function () {
            $scope.loginForm = {
                pin: ''
            };
        };

        $scope.login = function () {
            if ($scope.loginForm.$valid) {
                // login code
                $timeout(function () {
                    $location.path('#/orderList');
                }, 1000);
            } else {
                $scope.loginForm.pin.$dirty = true;
            }
        };
    }]);

})(angular);

I am not able to access $scope.loginForm.pin.$dirty?