Why is $scope not getting passed to controller?

Question

For some reason $scope.username is not being passed to my controller. On click registerUser() $scope.username is undefined. I do have a scope and the function is running just no $scope.username.

For example:

HTML:

 <input bs-form-control
     type="text"
     ng-model="username"
     label="Username"
     />

<button class="btn btn-primary" ng-click="registerUser()">Register</button>

controller:

    .controller("loginController", ['$scope',
        function ($scope) {
            $scope.registerUser = function(){
                console.log($scope.username) // <=== undefined!
            }

  }])

My controller is passed using state:

.state('register', {
            url: "/register",
            templateUrl: "/static/html/profile/register.html",
            controller: "loginController"
        })

Answer 1

I think bs-form-control creates a new isolated scope. What you should do is either use objects on your scope ( Does my ng-model really need to have a dot to avoid child $scope problems? ) or use the new "constroller as" syntax introducted in AngularJS 1.2. It works with ui-router too!

See this plunker: http://plnkr.co/edit/hkmMGbTtURSHDH84miiK?p=preview

Routing:

.state('register', {
    url: "/register",
    templateUrl: "/static/html/profile/register.html",
    controller: "loginController as loginCtrl"
})

Template:

<input bs-form-control type="text" ng-model="loginCtrl.username" label="Username" />
<button class="btn btn-primary" ng-click="loginCtrl.registerUser()">Register</button>

Controller:

Use this instead of $scope :

.controller("loginController", [
    function () {
        this.registerUser = function(){
            console.log(this.username);
        }
    }
])