ng-click is not sending value to the angular controller - html

Question

I have a form and trying to send the value of the input to the angular controller but on click, the value in the controller is showing undefined.
html code
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label" >Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();" >
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);" ></flash-message>
</div>
</form>
</div>
</div>
angular controller
$scope.submituserPhone = function() {
console.log($scope.phone);
$http.post('insertphone',$scope.phone),then(function() {
if(response.data.status === false) {
Flash.create('danger',response.data.message);
}else{
$scope.questioncode = 3;
}
})
}

Answer 1

So the problem is the ng-if which is creating a new scope, hence the scope variable phone is not getting updated in the controller. Here are two methods to tackle this problem.
Using $parent:
You can use $parent to update the variable of the parent scope instead of the current one, then your variable will be visible inside the controller.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function() {
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="$parent.phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>
Pass the variable as a parameter:
You can simply just pass the variable of the created scope into the controller function and update it there, as shown below.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function(phone) {
$scope.phone = phone;
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone(phone);">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>