title: Angular TypeError cannot read property 'then' of undefined
body: <p>I have a function named <code>crop</code></p>
  
  <pre><code>$scope.crop = function (id) {
      var options = {
          template: "templates/polaroids_edit_crop.html",
          url: PolaroidsService.getPolaroid(id).polaroid,
          width: 300,
          height: 300
      };
  
      $jrCrop.crop(options).then(function (canvas) {
          PolaroidsService.setCropped(id, canvas.toDataURL());
      });
  };
  </code></pre>
  
  <p>But when i call this function i get an error at this line:</p>
  
  <pre><code>$jrCrop.crop(options).then(function (canvas)
  </code></pre>
  
  <p>which contains:</p>
  
  <pre><code>TypeError: Cannot read property 'then' of undefined
  at Scope.$scope.crop (polaroids_edit.js:51)
  at $parseFunctionCall (ionic.bundle.js:21044)
  at ionic.bundle.js:53458
  at Scope.$eval (ionic.bundle.js:23100)
  at Scope.$apply (ionic.bundle.js:23199)
  at HTMLButtonElement.&lt;anonymous&gt; (ionic.bundle.js:53457)
  at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
  at triggerMouseEvent (ionic.bundle.js:2863)
  at tapClick (ionic.bundle.js:2852)
  at HTMLDocument.tapTouchEnd (ionic.bundle.js:2975)
  </code></pre>
  
  <p>The <code>$jrCrop.crop(options)</code> does the following:</p>
  
  <pre><code>crop: function (options) {
      options = this.initOptions(options);
  
      var scope = $rootScope.$new(true);
  
      ionic.extend(scope, options);
  
      $ionicModal.fromTemplateUrl(template, {
          scope: scope,
          animation: 'slide-in-up'
      }).then(function (modal) {
          scope.modal = modal;
  
          return scope.modal.show().then(function () {
              return (new jrCropController(scope)).promise.promise;
          });
      });
  }
  </code></pre>
  
  <p>I have to wait for the template to be loaded and only if it is loadedi can return the modal. How could i solve this?</p>