Ionic popup $scope template form $valid


Hi I wonder how I get the $valid of a form in an Ionic popup show template. I can see that the template works and the $valid works in the form but i cant get in in the controller. How do I make sure the popup have the same scope as the controller?

.controller("UserCtrl", function($state, $scope, $http, user, $ionicPopup, $ionicViewService, $ionicNavBarDelegate, $cordovaStatusbar){
  $scope.change_pin_form = {
    'current_pin': null,
    'new_pin': null

  $scope.changePIN = function(){
    $scope.changePINPopup = ${
      title: 'Change PIN',
      subTitle: 'With a PIN the checkout process becomes faster.',
      scope: $scope,
      buttons: [
        { text: 'Cancel',
        { text: 'Change',
          type: 'button-positive button-register',
          onTap: function(e) {
            console.log("THE FORM:", $scope.change_pin_form);
              var x = user.setPIN($scope.change_pin_form.new_pin);
              }, function(d){
                console.log('Error setting PIN');
            } else {
              console.log("Form not valid, you cant click me!");

  <script id="user.html" type="text/ng-template">
      <ion-view title="User data" ng-controller="UserCtrl" class="user-view">
          <div class="buttons">
            <button class="button change-pin button-block button-default" ng-click="changePIN()">Change PIN</button>

<div class="change_pin_popup_form">
<div>ERROR {{change_pin_form.$valid}} </div>
  <form name="change_pin_form" novalidate>
    <div class="form-item">
      <label class="item item-input item-stacked-label">
        <span class="input-label">Current PIN</span>
        <input type="number" name="current_pin" ng-model="current_pin" correct-pin="{{current_pin}}" ng-minlength=4 ng-maxlength=4 required>
      <div class="error-container" ng-show="change_pin_form.current_pin.$dirty && change_pin_form.current_pin.$invalid">
        <small class="error" ng-show="change_pin_form.current_pin.$error.required">Please input your current PIN</small>
        <small class="error" ng-show="change_pin_form.current_pin.$error.correct-pin">Wrong PIN</small>
    <div class="form-item">
      <label class="item item-input item-stacked-label">
        <span class="input-label">New PIN</span>
        <input type="number" name="new_pin" ng-model="new_pin" ng-minlength=4 ng-maxlength=4  required>
      <div class="error-container" ng-show="change_pin_form.new_pin.$dirty && change_pin_form.new_pin.$invalid">
        <small class="error" ng-show="change_pin_form.new_pin.$error.minlength || change_pin_form.new_pin.$error.maxlength">Your PIN is required to be 4 digits</small>


try to set form name as an object key:
in your controller:
$scope.form = {};

in your template


Thought this in the beginning did that :confused:

$scope.change_pin_form = {
    'current_pin': null,
    'new_pin': null


If i remove the <form name="whatever"> tag from the template i get the variables to the controller but then the form validation stops working.

Also by adding separate name for the form and ng-model i can at least validate the form on two places but still seems like a lot of extra then just checking the form.$valid.


Iā€™d be interested in a proper solution as well.


Do this i your controller:

$scope.form = {
myForm: {}

In your template:

now form validation should work and you get the form-object on $scope.form.myForm.


Thank you for your solution!


For anyone looking for a solution in the form of an example see the $ in the docs at$ionicPopup/. It allows you to set the scope attached to the popup as well as preventDefault event propagation.