get number box value ionic

I have the following template and controller code 

<ion-view view-title="Calculator">
    <ion-content>
    <input type="number" ng-model="mynumber" class="border-input" />
    <button ng-click="doSquare()">X<sup>2</sup></button>
    <button ng-click="doCube()">X<sup>3</sup></button>
    <div>Answer</div>
    </ion-content>

</ion-view>


.controller('CalculatorCtrl', function ($scope) {
    $scope.doSquare = function () {
    //$scope.mynumber = 33;
    var num = $scope.mynumber;
    alert(num);
    }
})

when I uncomment the line that sets the number it works but when I try and retrieve the number it's undefined. can anyone help

In Angular, you need nested scopes. So, your ng-model needs to be fixed to:

<input type="number" ng-model="mynumber.val" class="border-input" />

And then in your controller, you define the mynumber object and then use your variable wherever required:

$scope.mynumber = {};
alert($scope.mynumber.val);

I've created a Codepen if you want to test the working code.