title: Can't access prototype function in jQuery plugin
body: <p>I'm trying to create an image gallery consisting of multiple 360 degree images. I wanted to use <a href="https://github.com/flimshaw/Valiant360" rel="noreferrer">Valiant360</a> for this, since it seemed to do all I needed it to do. </p>
  
  <p>The initiation through Angular worked pretty ok, BUT now I'm at a point where I wanted to implement multiple images and it just does not work.</p>
  
  <p>No error, no logs, nothing. </p>
  
  <p>So here is my code...</p>
  
  <p>In the html-template:</p>
  
  <pre><code>&lt;ul class="view__content--imageList"&gt;
      &lt;li class="view__content--listItem" ng-repeat="image in laden.images" ng-click="loadImage($index)"&gt;
          &lt;p class="view__content--description"&gt;{{image.description}}&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In the controller within the corresponding js:</p>
  
  <pre><code>var container = $('.valiantPhoto');
  
  laden.success(function (data)
  {
      $scope.laden = data;
      console.log(data);
  
      $timeout(function ()
      {
          container.Valiant360({
              hideControls: false,
              fov: 35,
              fovMin: 35,
              fovMax: 35,
              clickAndDrag: true
          });
      });
  });
  
  $scope.loadImage = function (id)
  {
  
      var image = $scope.laden.images[id].image;
      var mimage = $scope.laden.images[id].mimage;
  
      if ($('.view__content--360gallery').height() &gt; 300)
      {
          container.Valiant360('loadPhoto', image);
      } else {
          container.Valiant360('loadPhoto', mimage);
      }
  }
  </code></pre>
  
  <p>I manipulated the original plugin js to have logs and the function there now looks like this:</p>
  
  <pre><code>loadPhoto: function(photoFile) {
      console.log("Loading...");
      this._texture = THREE.ImageUtils.loadTexture( photoFile );
      console.log("Loaded: ", photoFile);
  };
  </code></pre>
  
  <p>I've spend half a day by now trying to figure this out, but I'm not seeing it. Obviously I'm not the only one with that problem as you can see here: <a href="https://github.com/flimshaw/Valiant360/issues/29" rel="noreferrer">https://github.com/flimshaw/Valiant360/issues/29</a> but I have no experience with jQuery plugins except using working ones. So it might be a pretty obvious mistake, but still, I would very grateful if anybody could push me in the right direction here... </p>
  
  <hr>
  
  <p>Edit:
  I did some more searching and found this <a href="https://stackoverflow.com/a/14128485/5708297">https://stackoverflow.com/a/14128485/5708297</a></p>
  
  <p>My function now looks like this and I get the logs from loadPhoto in the plugin: </p>
  
  <pre><code>$scope.loadImage = function (id)
  {
      console.log("Container Height: ", $('.view__content--360gallery').height());
  
      var image = $scope.laden.images[id].image;
      var mimage = $scope.laden.images[id].mimage;
      var temp = container.Valiant360().data('plugin_Valiant360');
  
      if ($('.view__content--360gallery').height() &gt; 300)
      {
          temp.loadPhoto(image);
      } else {
          temp.loadPhoto(mimage);
      }
  }
  </code></pre>
  
  <p>So basically the problem is resolved :) </p>