title: Adding url and alt attributes dynamically with radio buttons in Angularjs
body: <p>So I have a group of radio buttons that are built dynamically using a JSON file.  The JSON file contains things like url (of an image), alt text, etc...</p>
  
  <p>I have it working pretty well, and can change the value of the img src based on the value of the radio button selected.  However, what if I need to access other elements of the json object as well so that I can set the alt text of the image depending on the element selected.</p>
  
  <p>Here is a plunkr of the basic functionality as I have it to this point...</p>
  
  <p><a href="http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview" rel="nofollow">http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview</a></p>
  
  <p>The JSON object looks like so:</p>
  
  <pre><code>{
      "header_images" : [
          {
              "id" : "havoc-header",
              "alt" : "Some alt text",
              "fname" : "admissions-general-havoc-header.jpg",
              "url" : "email-assets/header-images/admissions-general-havoc-header.jpg"
          },
          {
              "id" : "cob-header",
              "alt" : "Some more alt text",
              "fname" : "cob-banner.jpg",
              "url" : "email-assets/header-images/cob-banner.jpg"
          },
          {
              "id" : "css-header",
              "alt" : "still some more alt text",
              "fname" : "css-banner.jpg",
              "url" : "email-assets/header-images/css-banner.jpg"
          },
          {
              "id" : "huns-header",
              "alt" : "one more alt-text",
              "fname" : "huns-banner.jpg",
              "url" : "email-assets/header-images/huns-banner.jpg"
          }
      ]
  }
  </code></pre>
  
  <p>The radio buttons are being built in the view like so:</p>
  
  <pre><code>&lt;label ng-repeat="header in assets.header_images"&gt;
      &lt;input type="radio" ng-model="assets.headerimage" value="{{header.url}}" id="{{header.id}}" data-alt="{{header.alt}}" /&gt;
      {{header.url}}
  &lt;/label&gt;
  </code></pre>
  
  <p>And my controller looks like this:</p>
  
  <pre><code>function MainCtrl($scope, $http) {
      $http.get('js/assets.json').then(function(res){
          $scope.assets = res.data;
      });
  }
  </code></pre>
  
  <p>So basically when a radio button is clicked, I would like to populate this which is outside of the ng-repeat:</p>
  
  <pre><code> &lt;img src="{{assets.headerimage}}" alt="{{alt}}" /&gt;
  </code></pre>
  
  <p>The src attribute is easy enough.  I have that working fine...As you can see when one of the dynamic radio buttons are checked, the value is added to the assets.headerimage binding. But, how would I set the appropriate alt text?</p>
  
  <p>I am sure this is really easy, but I can't get my head around it for some reason.  I am relatively new to angularjs, so be gentle :D </p>