ionicPopup form validation on submit I get 2 different scopes


#1

I have a form in an ionic popup. I am trying to do form validation when the form gets submitted. The popup gets created and the form gets submitted in the controller function. The problem is when I try to access the form through the scope in the function where the form gets submitted to I cannot get the form through the scope. I believe this is because ionicpopup creates a new scope on the popup as seen https://github.com/driftyco/ionic/blob/master/js/angular/service/popup.js#L17 line 280. Can someone explain. Following is my code.

// Controler    
(function() {
    
        var iam = 'HomeCtrl'
            ,dependencies = ['$scope', '$ionicPopup']
            ,f = function($scope, $ionicPopup) {
    
                var me = this;
    
    
                // Creates the pop
                $scope.showLogin = function () {
                    $scope.user = {
                        username: '', password: ''
                    }
                    popLogin = $ionicPopup.show({
                        title: 'Welcome'
                        ,templateUrl: '/app/home/login.html'
                        ,scope: $scope
                        ,subTitle: 'Sign in & start composing', id: 'login-form'
                        ,buttons: [
                            {
                                text: 'Sign In'
                                ,onTap: function() {
                                    console.log(this.loginForm);
                                }
                            }
                        ]
                    });
    
                }
    
                // Function where the form gets submitted to.
                $scope.doLogin = function() {
                    console.log('here', this, $scope);
                }
    
            }
    
    
    
    
        angular.module('cv').controller(iam, dependencies.concat(f));
    })();

And this is the form

  // Form template
    <form name="loginForm" ng-submit="doLogin()" novalidate>
    <div class="list">
        <label class="item item-input" ng-class="{'cv-invalid': loginForm.username.$invalid && !loginForm.username.$pristine}">
            <input placeholder="Email Id" ng-model="user.username" type="email" ng-maxlength="50" required name="username">
        </label>
        <label class="item item-input" ng-class="{'cv-invalid': loginForm.password.$invalid && !loginForm.password.$pristine}">
            <input type="password" placeholder="Password" ng-model="user.password" name="password" ng-minlength="6" required    >
        </label>
    
            <button type="submit" class="button col button-assertive">Sign in</button>
    </div>
    </form>

As you can see in the doLogin() function in the controller I get a new scope in this. Can someone explain what I am doing wrong.