title: Ionic Modal: clear all fields on click/cancel
body: <p>Ive tried to use this with the current view scope and also by adding its own controller. No success in clearing all fields on cancel button click. All I need is to clear the fields. </p>
  
  <p>Here is my in my controller modal : </p>
  
  <pre><code>var myApp = angular.module('starter.controllers');
  
  function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
  var nextPageNum = 1;
  $scope.noMoreItemsAvailable = false;
  var nextPageNum = 1;
  $scope.loadMore = function() {
      TalkSearch.getList(nextPageNum, {
  
      }, $scope.idsToExclude, $scope.backResult).success(function(items) {
          if (typeof(items.idsToExclude) !== undefined) {
              $scope.idsToExclude = items.idsToExclude;
              $scope.backResult = true;
          } else {
              $scope.idsToExclude = undefined;
              $scope.backResult = undefined;
          }
          // error check when it's not loading
          if (items.talks.length != 0) {
              i = 0;
              while (i != items.talks.length - 1) {
                  $scope.talks.push(items.talks[i]);
                  i++;
              }
              nextPageNum++;
          } else {
              $scope.noMoreItemsAvailable = true;
          }
  
          $scope.$broadcast('scroll.infiniteScrollComplete');
      });
  
  
  };
  
  $scope.talks = [];
  
  $scope.categories = [
  ];
  
  $scope.checkedCategories = [];
  
  
  $scope.toggleCheck = function(category) {
      if ($scope.checkedCategories.indexOf(category) === -1) {
          $scope.checkedCategories.push(category);
      } else {
            $scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
      }
  };
  $scope.getValues = function(filter) {
      console.log(filter);
      if (filter.length || filter !== undefined) {
          $scope.userFilter = {};
          $scope.userFilter.categories = [];
          $scope.userFilter.filters = {};
          $scope.userFilter.filters = angular.copy(filter);
          var categories = $scope.checkedCategories;
          $scope.userFilter.categories = categories;
          getFiltersService.filter = angular.copy(filter);
          console.log($scope.userFilter);
          // console.log(getFiltersService.filter);
      }
  };
  
  $scope.reset = function() {
      console.log($scope.userFilter);
      // $scope.modal.hide();
      // $scope.userFilter.filters = null;
      // $scope.userFilter.categories = null;
      // $scope.userFilter = {};
      console.log($scope.userFilter);
  };
  
  $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
  }).then(function(modal) {
      $scope.modal = modal;
  });
  </code></pre>
  
  <p>}
      myApp.controller('TalkSearchPageCtrl', ['$scope', 'TalkSearch', '$ionicModal',       TalkSearchPageCtrl]);</p>
  
  <pre><code>$ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
  }).then(function(modal) {
      $scope.modal = modal;
  });
  </code></pre>
  
  <p>Here is my html script template : </p>
  
  <pre><code>&lt;script id="my-modal.html" type="text/ng-template"&gt;
  &lt;ion-modal-view&gt;
      &lt;ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl"&gt;
          &lt;div class="row padding0"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"&gt;&lt;span&gt;Cancel&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;div class="light headerTitle"&gt;&lt;span class="light"&gt;Schoo&lt;/span&gt;&lt;span class="color-black"&gt;Links&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;div class="button button-white searchButton" side="left"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content class="has-header"&gt;
          &lt;div class="talkFilterContainer"&gt;
              &lt;section&gt;
                  &lt;div class="col padding0"&gt;
                      &lt;div class="list list-inset"&gt;
                          &lt;label class="item item-input"&gt;
                              &lt;i class="icon ion-search placeholder-icon"&gt;&lt;/i&gt;
                              &lt;input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }"&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;div class="row padding clearboth"&gt;&lt;/div&gt;
              &lt;section&gt;
                  &lt;div class="list padding"&gt;
                      &lt;label class="item item-input item-select"&gt;
                          &lt;div class="input-label"&gt;
                              Language:
                          &lt;/div&gt;
                          &lt;select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)"&gt;
                              &lt;option value=""&gt;Select Preferred Language&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;div class="row padding clearboth"&gt;&lt;/div&gt;
              &lt;section&gt;
                  &lt;div class="list padding"&gt;
                      &lt;label class="item item-input item-select"&gt;
                          &lt;div class="input-label"&gt;
                              Author Type:
                          &lt;/div&gt;
                          &lt;select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)"&gt;
                              &lt;option value=""&gt;Select By Author Type&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;div class="row padding clearboth"&gt;&lt;/div&gt;
              &lt;section class="padding"&gt;
                  &lt;ion-list&gt;
                      &lt;ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails  &amp;&amp; $index &gt; 2}"&gt;
                          &lt;ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)"&gt;{{category}}&lt;/ion-checkbox&gt;
                      &lt;/ion-item&gt;
                  &lt;/ion-list&gt;
                  &lt;div class="row"&gt;
                      &lt;button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton"&gt;See All Categories&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-modal-view&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my reset function: </p>
  
  <pre><code>var Talk = this;
  Talk.reset = function(filter) {
      console.log(filter);
      filter = null;
  };
  </code></pre>
  
  <p>Also tried with $scope :</p>
  
  <pre><code>$scope.reset = function(filter) {
      console.log(filter);
      filter = null;
  };
  </code></pre>
  
  <p>***Update: </p>
  
  <pre><code>$scope.reset = function(filter) {
       $scope.userFilter = null; //does not work. none of these variations work.
       $scope.userFilter = '';
  };
  </code></pre>
  
  <p>Both of these methods return undefined. But if i put the button in the body it clears the fields. I need the button in the header. </p>
  
  <p>Also tried inlining the reset with: </p>
  
  <pre><code>&lt;button ng-click="talkfilter=null"&gt;&lt;/button&gt;
  </code></pre>