$scope doesn't picks up string from form input

Question

I am trying to implement Change Password feature in MVC (Rest server) application from the User Control Panel but because of some strange reason I can't scope values from form input.

My html form:

<accordion-group heading="Change password" is-open="changePasswordStatus.open" style="cursor: pointer">
    <div>
        <div>
            <form class="form-horizontal" role="form">
                <form-row model="newPassword" name="New: " size="col-sm-8"></form-row>
                <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8"></form-row>
                <form-row model="currentPassword" name="Current: " size="col-sm-8"></form-row>
                <br>
            </form>
        </div>
        <div>
        <button class="btn btn-default btn-sm" ng-click="changePassword()">Save</button>
        <button class="btn btn-warning btn-sm" ng-click="changePasswordStatus.open = !changePasswordStatus.open">Cancel</button>
    </div>
</div>
</accordion-group>

My formRow.html:

<div class="form-group">
    <label for="inputText3" class="col-sm-2 control-label">{{name}}</label>
    <div class="{{size}}">
        <input type="{{type}}" class="form-control" data-ng-model="model">
    </div>
</div>

My formRow.js:

collectionsApp.directive('formRow', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',
            name: '@',
            size: '@',
            type: '@'
        },
        templateUrl: '/directives/formRow.html',
        link: function(scope, attrs, element) {

        }
    }
});

My userController:

$scope.changePassword = function() {
    if ($scope.newPassword === $scope.repeatedNewPassword) {
        userService.changePassword($scope.newPassword, $scope.currentPassword);
    } else {
            $scope.alerts.push({
                msg : 'Passwords do not match!'
            })
    }
}

And when I enter values in inputs and place breakpoints and trigger changePassword() in debug i get:

If condition has passed with value of true because they are both undefined.

Answer 1

Working in this plunker template ?

<form ...>
  <form-row model="newPassword" name="New: " size="col-sm-8" required ></form-row>
  <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8" required ></form-row>
  <form-row model="currentPassword" name="Current: " size="col-sm-8" required ></form-row>
</form>

Answer 2

I believe this may be the case of prototypical inheritance and scope, requiring an object being passed into your scoped parameters. Mind trying to change your parent scope to use an object and bind to the properties and not the primitive values:

$scope.security = {newPassword : '', currentPassword = ''};

then you would use something like this in your attributes:

model="security.newPassword"

Or better yet, not make it confusing with model:

myapp-model="security.newPassword"

or pass in the whole object

myapp-security="security"