title: Uncaught TypeError: Cannot read property 'attr' of null using popover
body: <p>I'm using onsen-ui 1.3.13 and I get this error that I don't understand:
  Uncaught TypeError: Cannot read property 'attr' of null using popover   @   loader.js:1450</p>
  
  <p>I basically have 1 button, when I click it, I have 1 popover showing up with 2 other button. button 2 does a simple pop on an array. It worsk but give me this error right after.</p>
  
  <p>Here is my code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;script src="components/loader.js"&gt;&lt;/script&gt;
      &lt;script src="js/controler.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-moment.js"&gt;&lt;/script&gt;
      &lt;script src="js/readable-range.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="components/loader.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/sliding_menu.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;ons-sliding-menu main-page="initial.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu" side="left" close-on-tap&gt;
      &lt;/ons-sliding-menu&gt;
  
      &lt;ons-template id="menu.html"&gt;
          &lt;ons-page modifier="menu-page"&gt;
              &lt;ons-toolbar modifier="transparent"&gt;
                  &lt;div class="right"&gt;
                      &lt;ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()"&gt;
                          &lt;/ons-icon&gt;Close
                      &lt;/ons-toolbar-button&gt;
                  &lt;/div&gt;
              &lt;/ons-toolbar&gt;
  
              &lt;ons-list class="menu-list" ng-controller="PopoverController"&gt;
                  &lt;ons-list-item class="menu-item" ng-click="menu.setMainPage('initial.html', {closeMenu: true})"&gt;
                      &lt;ons-icon icon="fa-gbp"&gt;&lt;/ons-icon&gt;
                      Initial page
                  &lt;/ons-list-item&gt;
                  &lt;ons-list-item class="menu-item" ng-click="reset();menu.closeMenu()"&gt;
                      &lt;ons-icon icon="fa-gbp"&gt;&lt;/ons-icon&gt;
                      reset
                  &lt;/ons-list-item&gt;
              &lt;/ons-list&gt;
          &lt;/ons-page&gt;
      &lt;/ons-template&gt;
  
      &lt;ons-template id="popover.html"&gt;
          &lt;ons-popover direction="down" cancelable&gt;
                  &lt;ons-list&gt;
                      &lt;ons-list-item modifier="tappable" ng-click="alert(true, 'Sorry not available in this version')"&gt;
                          &lt;ons-icon icon="fa-cloud"&gt;&lt;/ons-icon&gt;
                          Save property
                      &lt;/ons-list-item&gt;
                      &lt;ons-list-item modifier="tappable" ng-click="reset(); destroy($event)" &gt;
                          &lt;ons-icon icon="fa-home"&gt;&lt;/ons-icon&gt;
                          &lt;label&gt;Reset&lt;/label&gt;
                      &lt;/ons-list-item&gt;
                  &lt;/ons-list&gt;
          &lt;/ons-popover&gt;
      &lt;/ons-template&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>controler.js:</p>
  
  <pre><code>var app = ons.bootstrap('propertyDeal', ['onsen','angularMoment']);
  
      app.factory('Property', function () {
  
          /**
          * Constructor, with class name
          */
          function Property(newProperty) {
              this.id = newProperty.id;
              this.purchasePrice = newProperty.pprice;
              this.legaFee = newProperty.legal;
            }
  
          return {
              createNew: function(newProperty) {
                  return new Property(newProperty);
              }
          };
      });
  
  
      app.factory('portfolio', function(Property){
          var portfolio = {};
          portfolio.list = [];
  
          portfolio.add = function(newProperty){
              var prop = Property.createNew(newProperty);
              portfolio.list.push(prop);
          };
          portfolio.remove = function(){
              var removed = portfolio.list.pop();
          };
  
          return portfolio;
      });
  
      app.controller('PopoverController', function($scope, portfolio) {
          $scope.popurl = function(url, e) {
              $scope.param = url; 
  
              ons.createPopover( $scope.param,{parentScope: $scope}).then(function(popover) {
                  $scope.popover = popover;
                  $scope.show(e);
              });
  
              $scope.show = function(e) {
                  $scope.popover.show(e);
              };
              $scope.destroy = function(e) {
                  $scope.popover.destroy(e);
              };
          };
  
          $scope.alert = function(material, message) {
              ons.notification.alert({
                  message: message,
                  modifier: material ? 'material' : undefined
              });
          };
  
          $scope.reset = function() {
              if (portfolio.list.length &gt;= 1){
                  portfolio.remove();
              }
          };
      });
  
      app.controller('ListCtrl', function(portfolio) {
          this.portfolio = portfolio.list;
      });
  
      app.controller('PostCtrl', function(portfolio){
  
          this.addProperty = function(newProperty){
              if (angular.isDefined(newProperty)) {
                  newProperty.id = portfolio.list.length;
                  portfolio.add(newProperty);
              }
          };
      });
  </code></pre>
  
  <p>initial.html</p>
  
  <pre><code>&lt;ons-navigator&gt;
  &lt;ons-page&gt;
      &lt;div class="container"&gt;
          &lt;ons-toolbar&gt;
              &lt;div class="left"&gt;
                  &lt;ons-toolbar-button ng-click="menu.toggleMenu()"&gt;
                      &lt;ons-icon icon="ion-navicon" size="28px" fixed-width="false"&gt;&lt;/ons-icon&gt;
                  &lt;/ons-toolbar-button&gt;
                  &lt;ons-icon class="icon" icon="ion-android-share"&gt;&lt;/ons-icon&gt;&amp;nbsp;this is a test
              &lt;/div&gt;
              &lt;div class="right" ng-controller="PopoverController"&gt;
                  &lt;ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)"&gt;
                      &lt;ons-icon icon="ion-android-share" fixed-width="false"&gt;&lt;/ons-icon&gt;
                  &lt;/ons-toolbar-button&gt;
                  &lt;ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)"&gt;
                      &lt;ons-icon icon="ion-android-more-vertical" fixed-width="false"&gt;&lt;/ons-icon&gt;
                  &lt;/ons-toolbar-button&gt;
              &lt;/div&gt;
          &lt;/ons-toolbar&gt;
      &lt;/div&gt;
  
      &lt;div style="text-align: center"&gt;
          &lt;h2&gt;Page 1&lt;/h2&gt;
  
          &lt;ul class="list"&gt;
                  &lt;input type="hidden" ng-model="newProperty.id" placeholder="id"&gt;
              &lt;li class="list__item"&gt;
                  &lt;span class="currency"&gt;£&lt;input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required&gt;&lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="list__item"&gt;
                  &lt;span class="currency"&gt;£&lt;input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fees"&gt;&lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div ng-controller="PostCtrl as post"&gt;
          &lt;button class="button" ng-click="post.addProperty(newProperty);menu.setMainPage('initial2.html')"&gt;Next &lt;ons-icon icon="ion-arrow-right-b"&gt;&lt;/ons-icon&gt;&lt;/button&gt;
          &lt;p&gt;{{newProperty}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div ng-controller="ListCtrl as list"&gt;
          &lt;p ng-repeat="prop in list.portfolio track by $index"&gt;
              New Property: {{prop.id}} - {{prop.purchasePrice}}: {{prop.legaFee}} &lt;/p&gt;
      &lt;/div&gt;
  &lt;/ons-page&gt;
  &lt;/ons-navigator&gt;
  </code></pre>
  
  <p>After adding the reset() to the sliding menu as well, I can also say that it works perfectly fine with the sliding menu so I think it's definitely a problem with popover but I don't know what.</p>
  
  <p>Thank you for your help</p>