title: Getting an image to appear on a popup window with Angular JS
body: <p>This is my first post on StackOverflow and I am teaching myself Angular, so I am a beginner and currently confused.</p>
  
  <p>I am creating a webpage with Angular and one of the pages involve a button and a popup window. I would like to put an image into the popup window, but I am having a lot of trouble with getting this to work. </p>
  
  <p>The step and name properties are successfully appearing in the popup window, but the image is not working. I have tried just getting the url to appear as a string, but that also doesn't work. </p>
  
  <p>I've also tried getting the id property (which is just a string) to appear, but that also doesn't work. </p>
  
  <p>I put only one set of curly brackets around the ctrl.figure in the html because that at least gets me a broken picture icon in the popup window, whereas if I use two curly brackets, as is normally suggested, I get nothing. </p>
  
  <p>I am hosting the website on my local computer and with Chrome Dev tools, keep getting a message that the file is not found. I've checked the file path multiple times and it seems fine. Since I can't get the figure's url to appear as just a string, I'm thinking that the problem might have something to do with the controller. </p>
  
  <p>Any suggestions would be greatly appreciated. The first set of code is the html for the popup window and the second bit is from the controller.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--Overlay div for popup window--&gt;
      &lt;div ng-show= "ictrl.showValue" class="instAbsolute col-xs-12 col-md-10 ng-cloak"&gt;
          &lt;span class= "glyphicon glyphicon-remove pull-right" ng-click = "ictrl.hideDetails()"&gt;&lt;/span&gt;
          &lt;h4 class = "text-muted" &gt;{{ictrl.step}}&lt;/h4&gt;
          &lt;h1 class = "text-grey"&gt;{{ictrl.name}}&lt;/h1&gt;
          &lt;h1 class = "text-grey"&gt;{{ictrl.id}}&lt;/h1&gt;
          &lt;div ng-bind-html="ictrl.description"&gt;
          &lt;/div&gt;
            &lt;img class= "img-responsive" ng-src="{ictrl.figure}" alt="{{ictrl.alt}}"&gt;
      &lt;/div&gt; 
     &lt;/div&gt; &lt;!--end of controller --&gt;
  &lt;/div&gt; &lt;!--end of app --&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('instructionsApp', ['ngSanitize']).controller('instructionsCtrl',[
  
      function() {
          var self = this;
          self.showValue = false;
          self.showDetails = function(id) {
              for (var i = 0; i &lt; this.steps.length; i++) {
                  if (self.steps[i].id === id) {
                      self.name = self.steps[i].name;
                      self.step = self.steps[i].step;
                      self.description = self.steps[i].description;
                      self.showValue = true;
                  }
              }
          };
          self.hideDetails = function() {
              self.showValue = false;
          };
          self.steps = [{
          {
              name: "Attach Camera",
              id: "S1",
              step: "Setup",
              description: "&lt;p&gt;There are many ways to attach you camera to your laptop.&amp;nbsp; For digital camera output, we recommend connecting the camera with a wire to the faster firewire port &amp;ndash; but the USB port will also work.&amp;nbsp; As an example, for analog camera output you can use an external capture device (such as the Dazzle from Pinnacle) with a 3-port composite connector into the camera and a USB connection on the other end of the cable into the laptop.&amp;nbsp; Also, there are many ways to interface a camera to an internal video capture card.&amp;nbsp; See illustrations below:&lt;\/p&gt;"
          }, {
              name: "Launch VazztCaster",
              id: "S2",
              step: "Setup",
              figure: "../img/instructionsImages/launchVazztCaster.jpg",
              description: "&lt;p&gt;Launch the VazztCaster.exe program on your laptop by clicking on the Vazzt icon (red V) on your desktop. &amp;nbsp;After launch, on the home page of VazztCaster click on the Login Icon (person) and enter the Credentials:&lt;\/p&gt;&lt;p&gt;Next Click on the Video Settings Icon (blue camcorder)&amp;nbsp; and enter your choice of&amp;nbsp;&lt;\/p&gt;&lt;p&gt;&amp;nbsp;&lt;\/p&gt;&lt;p&gt;Note that the VazztCaster will automatically set default values, if possible, in the Video Settings fields based on the camera attached, the IP networks it finds, and the audio equipment attached:&lt;\/p&gt;&lt;ul&gt;&lt;li&gt;Video Capture Devices&lt;\/li&gt;&lt;li&gt;Video Resolution&lt;\/li&gt;&lt;li&gt;Video Bandwidth&lt;\/li&gt;&lt;li&gt;Aspect Ratio&lt;\/li&gt;&lt;li&gt;Audio Capture Device&lt;\/li&gt;&lt;li&gt;And other Audio parameters.&amp;nbsp;&lt;\/li&gt;&lt;\/ul&gt;&lt;p&gt;However, you can manually override these.&amp;nbsp; Click the OK button when you are finished.&lt;\/p&gt;&lt;p&gt;Most cameras will automatically provide notification of the various resolutions that the camera can support.&amp;nbsp; VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.&lt;\/p&gt;&lt;p&gt;&amp;nbsp;&lt;\/p&gt;&lt;p&gt;&amp;nbsp;&lt;\/p&gt;",
              alt: "Launch VazztCaster",
              imageCaption: "After launching VazztCaster, this is what your screen should look like."
          }];
      }
  ]);
  </code></pre>