phonegap/ionic - $scope inside of click function not updating

I have a simple setup where I want to click a button and get the data from an input control. The problem is that the $scope variable inside of the click function keeps the same value as when the code is first run. Everything works exactly as planned when I create a fiddle in the web.

HTML

<div ng-app>
    <div ng-controller="TodoCtrl">
        <input type="text" ng-model="authenticationCode">
        <br>
        <button class="button" ng-click="authenticate()">Authenticate</button>
        <br>
        <span>Auth info: {{authinfo}}</span>
        <br>
        <span>authenticationCode - {{authenticationCode}}</span>
    </div>
</div>

JavaScript

function TodoCtrl($scope) {
    $scope.authenticationCode = 'TESTER';
$scope.authenticate = function(){
        var t = $scope.authenticationCode;
    $scope.authinfo = t;
    };
}

Fiddle of the code working in web

When I run this in PhoneGap

  • Screen loads with 'TESTER' in input box
  • Screen loads with 'TESTER' as value for "authenticationCode -"
  • Changing 'TESTER' in the input to 'CHANGED' updates "authenticationCode -" to 'CHANGED'
  • Clicking 'Authenticate' puts the value 'TESTER' as "Auth info:"

I don't know why $scope.authenticationCode is not updating it's value in the authenticate function. I'm also not sure why this works in the web and I'm having issues in PhoneGap with Ionic.

This issue may be occurring because primitives are being used in the TodoCtrl, please try this -

HTML

<div ng-controller="TodoCtrl">
    <label class="item item-input">
        <input type="text" ng-model="input.authenticationCode">
    </label>
    <br>
    <button class="button" ng-click="authenticate()">Authenticate</button>
    <br><br>
    <span>Auth info: {{input.authInfo}}</span>
    <br>
    <span>authenticationCode - {{input.authenticationCode}}</span>
</div>

JavaScript

.controller('TodoCtrl', ['$scope', function($scope) {
    $scope.input = {
        authenticationCode: 'TESTER',
        authInfo: ''
    };

    $scope.authenticate = function() {
        $scope.input.authInfo = $scope.input.authenticationCode;
        console.log('authInfo: ' + $scope.input.authInfo);
    };
}]);

Here is a CodePen of the above