Submit button needs to be clicked twice to call onSuccess Adaptor function in IBM Mobile First
<p>I am using AngularJS in a IBM MobileFirst Platform Foundation app. I have a login form and when I click the <strong>Login</strong> button it collects some data and passes it to adapter invoke function. If it is successful it never calls success <code>loginSuccess</code> function. I need to click <strong>Login</strong> button twice so that the success function is called.</p>

<p>Why do I need to click button twice?</p>

<p><strong>app.js</strong></p>

<pre><code>var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider.state('login', {
        url: '/login',
        templateUrl: 'view/login.html',
        controller: 'loginController'
    });
});
</code></pre>

<p><strong>login.js</strong></p>

<pre><code>app.controller('loginController', function($scope) {

    $scope.login = function(usrName, pass) {

        var usrName = angular.element('#usrName').val();

        var pass = angular.element('#pass').val();
        console.log("Variable values: " + usrName + " : " + pass);
        $scope.loginProcedure = {
            adapter: 'SQL',
            procedure: 'login',
            parameters: [usrName, pass]
        };

        WL.Client.invokeProcedure($scope.loginProcedure, {
            onSuccess: $scope.loginSuccess,
            onFailure: $scope.loginFailure
        });

        $scope.loginSuccess = function(data) {
            $scope.data = data;
            $scope.resultSet = data.resultSet;
            console.log('success: ' + JSON.stringify($scope.data + " : " + $scope.resultSet));
        };

        $scope.loginFailure = function() {
            console.log('failed');
        };
    }
});
</code></pre>

<p><strong>SQL-impl.js</strong></p>

<pre><code>/*
 *  Licensed Materials - Property of IBM
 *  5725-I43 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
 *  US Government Users Restricted Rights - Use, duplication or
 *  disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
/************************************************************************
 * Implementation code for procedure - 'procedure1'
 *
 *
 * @return - invocationResult
 */
var loginStatement = WL.Server.createSQLStatement("select usrname,password from jay1 where usrname = ? and password=? ");

function login(usr, pass) {
    return WL.Server.invokeSQLStatement({
        preparedStatement: loginStatement,
        parameters: [usr, pass]
    });
}

/************************************************************************
 * Implementation code for procedure - 'procedure2'
 *
 *
 * @return - invocationResult
 */

function procedure2(param) {
    return WL.Server.invokeSQLStoredProcedure({
        procedure: "storedProcedure2",
        parameters: [param]
    });
}
</code></pre>

<p><strong>index.html</strong></p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;AB&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"&gt;
    &lt;!--
                    &lt;link rel="shortcut icon" href="images/favicon.png"&gt;
                    &lt;link rel="apple-touch-icon" href="images/apple-touch-icon.png"&gt; 
                --&gt;
    &lt;link rel="stylesheet" href="css/main.css" /&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="css/bootstrap-responsive.min.css" /&gt;

    &lt;script&gt;
        window.$ = window.jQuery = WLJQ;
    &lt;/script&gt;
&lt;/head&gt;

&lt;body ng-app="myApp"&gt;
    &lt;!--application UI goes here--&gt;

    &lt;div id="view" ui-view&gt;&lt;/div&gt;

    &lt;script src="js/initOptions.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
    &lt;script src="js/messages.js"&gt;&lt;/script&gt;
    &lt;script src="library/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="library/angular.1.4.9.js"&gt;&lt;/script&gt;
    &lt;script src="library/angular-ui-router.min.js"&gt;&lt;/script&gt;
    &lt;script src="library/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="controller/app.js"&gt;&lt;/script&gt;
    &lt;script src="controller/login.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>login.html</strong></p>

<pre><code>&lt;div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock"&gt;

    &lt;!-- Login Box Start --&gt;

    &lt;div class="panel panel-primary"&gt;
        &lt;div class="panel-heading"&gt;Login&lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;form class="form-group" name="lgForm"&gt;
                &lt;input type="text" class="form-control" id="usrName" required /&gt;
                &lt;input type="password" class="form-control" id="pass" required /&gt;
                &lt;input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" /&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Login Box End --&gt;

    &lt;!--  error Modal start --&gt;

    &lt;div class="modal" role="modal" id="errorPopup"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;Error&lt;/div&gt;
                &lt;div class="modal-body"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!--  error Modal End --&gt;

&lt;/div&gt;
</code></pre>

<p>Which is correct way to parse JSON data using angularJS <code>$scope</code>?</p>

<p>1) <code>$scope.data = data; $scope.resultSet = data.resultSet;</code></p>

<p>2) <code>$scope.data = data; $scope.resultSet = $scope.data.resultSet;</code></p>