ng-model not binding to controller - angularjs

Question

I am trying to bind the value of a text input to a model value, but the value remains undefined...
The HTML:
<div class="panel panel-default">
<div class="panel-body">
<form name=user-form class="form-horizontal" novalidate>
<label for="firstname" class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-4">
<input type="text" ng-model="ctrl.formData.firstname" name="firstname" class="form-control" placeholder="Firstname"/>
</div>
<div class="col-md-offset-2">
<input type="submit" class="btn btn-primary" name="submit" value="Add" ng-click="ctrl.submit()">
</div>
</form>
</div>
</div>
AngularJS:
angular.module('app', ['ngRoute']);
angular.module('app').config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'MainController',
controllerAs: 'ctrl'
})
.when('/user', {
templateUrl: 'pages/user.html',
controller: 'UserController',
controllerAs: 'ctrl'
});
});
angular
.module('app')
.controller('UserController', ['$http', '$scope', function($http, $scope) {
var self = this;
self.formData = {};
self.submit = function() {
$http.post('http://localhost:50211/api/user/add',
JSON.stringify(self.getUserData()))
.success(function() {
console.log('Success');
})
.error(function() {
console.log('Failed');
});
};
self.getUserData = function() {
return {
FirstName: self.formData.firstname
};
};
}]);
The data object for the ajax request always contains 'Firstname: undefined', I'm guessing I'm missing something simple but cant see it.