Unable to control html elements using form state

Question

I am trying to create a form in angular

<form name="vm.mechanicalForm">
    <div layout="column" layout-padding>
       <div layout="row" layout-align="end center">
            <md-button class="aq-btn md-accent" type="submit"
                       ng-show="vm.Auth.check({access: 'EDIT'})"
                       ng-click="vm.save()"
                       ng-disabled="vm.mechanicalForm.$invalid">
                Save Button
            </md-button>
        </div>
        <div>
        <md-input-container class="md-block"
            ng-if="vm.building.mainSourceOfCooling === 'CHILLERS'">
                <label>Cooler</label>
                <input name="numberOfChillers" class="form-control" 
                       type="number" 
                       ng-model="vm.building.numberOfChillers"
                       required min="0">
                <div ng-messages="vm.mechanicalForm.numberOfChillers.$error"
                     ng-hide="vm.building.numberOfChillers">
                    <div ng-message="min">
                        <span class="red">Number of Chillers must be a positive number</span>
                    </div>
                </div>
        </md-input-container>
    </div>
    </div>
</form>

I cannot get any of the states connected to the form, for example vm.mechanicalForm.$invalid/$valid to work. I want to be able to disable my save button when there is a negative number of Coolers entered. Even though the error Number of chillers must be positive is displayed the save button still works. Additionally, I wanted to change the ng-hide on the ng-messages div to hide the div when the form is valid, but that seems to break functionality too. What can I do to correct this error? I have looked around on stack overflow and the answers I have seen seem to suggest I am using the form state correctly.

EDIT:

Here is my controller code:

namespace properties {
export class MechanicalCtrl {
    constructor(
        public Messages,
        public building,
        public BuildingService,
        private allEnums,
        private Auth
    ) {}

    public save() {
        this.BuildingService.updateBuilding(this.building)
            .then(() => {
                this.Messages.success('Successfully updated mechanical information');
            })
            .catch(() => {
                this.Messages.error('Unable to update mechanical information');
            });
    }
}
angular
    .module('properties')
    .controller('MechanicalCtrl', MechanicalCtrl);

}

According to the answer here I should be able to reference vm.mechanicalForm in my MechanicalCtrl as this.mechanicalForm (unless I misunderstood that answer). Another thing I have noticed is that I am not able to do this. I had tried debugging this by trying to console.log properties on the form but it is returned as undefined if I do console.log(this.mechanicalForm). Have I done something wrong?

EDIT 2:

I am setting up my template and controller as

.state(...) {
   templateUrl: 'my/template/url',
   controller: 'MechanicalCtrl as vm',
    ...
}