title: AngularJS - load images using REST API calls
body: <p>I am writing an application where I need to display car inventory. I ping an API to get all cars matching search criteria such as Car Make, Model and Year. I need to display an image of each car along with the other information. Once the JSON data is available, it also has an ID (StyleID) for each car in my results that I need to use to make another API call to request images for that car. </p>
  
  <p>After reading a few articles (<a href="http://www.ng-newsletter.com/posts/beginner2expert-directives.html" rel="nofollow">such as this one</a>) I figured I need to use a custom directive in order to query and insert each car's image in a specific spot when looping over the results. </p>
  
  <p>I read this <a href="http://codingsmackdown.tv/blog/2012/12/14/creating-a-simple-angularjs-directive/" rel="nofollow">custom directive tutorial</a> by Jim Lavin to create my sample. I was hoping that this approach will work however I must be missing something as it simply doesn't execute my custom directive and display the car image as I want it to. </p>
  
  <p>Can someone please help? </p>
  
  <hr>
  
  <p>Here's the plunker that shows my code:
  <a href="http://plnkr.co/edit/5DqAspT92RUPd1UmCIpn?p=preview" rel="nofollow">http://plnkr.co/edit/5DqAspT92RUPd1UmCIpn?p=preview</a></p>
  
  <p>Here's the information about the <a href="http://developer.edmunds.com/api-documentation/vehicle/media_photos/v1/01_photos_by_styleid/api-description.html" rel="nofollow">specific media call to Edmunds API</a> that I am trying to use.</p>
  
  <p>And here's the <a href="https://api.edmunds.com/v1/api/vehiclephoto/service/findphotosbystyleid?styleId=200489835&amp;fmt=json&amp;api_key=mexvxqeke9qmhhawsfy8j9qd" rel="nofollow">URL to the media endpoint</a></p>
  
  <hr>
  
  <p>Repeating my code :</p>
  
  <p>My HTML code :</p>
  
  <pre><code>&lt;div firstImageOfMyCar data-styleid="style.id"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;firstImageOfMyCar data-styleid="style.id"&gt;&lt;/firstImageOfMyCar&gt;
  </code></pre>
  
  <p>And here's my custom directive:</p>
  
  <pre><code>// Custom Directive to get first image of each car.
    app.directive('firstImageOfMyCar', function() {
      return {
        restrict: "E",
        link: function(scope, elm, attrs) {
          // by default the values will come in as undefined so we need to setup a
          // watch to notify us when the value changes
          scope.$watch(attrs.styleid, function(value) {
            //elm.text(value);
  
            // let's do nothing if the value comes in empty, null or undefined
            if ((value !== null) &amp;&amp; (value !== undefined) &amp;&amp; (value !== '')) {
  
              // get the photos for the specified car using the styleID.
              // This returns a collection of photos in photoSrcs.
              $http.get('https://api.edmunds.com/v1/api/vehiclephoto/service/findphotosbystyleid?styleId=' + value + '&amp;fmt=json&amp;api_key=mexvxqeke9qmhhawsfy8j9qd')
                .then(function(response) {
                $scope.photoSrcs = response.photoSrcs;
  
                // construct the tag to insert into the element.
                var tag = '&lt;img alt="" src="http://media.ed.edmunds-media.com' + response.photoSrcs[0] + '" /&gt;" /&gt;'
                // insert the tag into the element
                elm.append(tag);
              }, function(error) {
                $scope.error3 = JSON.stringify(error);
              });
            } 
          });
        }
      }; 
    });
  </code></pre>