title: How to load (and update) an image whose URL is the sum of two forms
body: <p>I'm trying to get a page where you get an image based on two forms: when you enter the page, the URL is the sum of the two first entries of the forms, but when you change them, the image updates.</p>
  
  <p>This code outputs "undefinedundefined" in the label of placehold</p>
  
  <p>app.js</p>
  
  <pre><code>app.controller('dtbCtrl', function($scope, $http) {
    $scope.selected1 = '1';
    $scope.selected2 = '2';
    $scope.one = [
      {value: '1', label: '1'},
      {value: '2', label: '2'},
      {value: '3', label: '3'},
      {value: '4', label: '4'}
    ];
    $scope.two = [
      {value: '1', label: '1'},
      {value: '2', label: '2'},
      {value: '3', label: '3'}
    ];
    $scope.pic = 'http://www.placehold.it/1618x1000?text=' + $scope.one.label + $scope.two.value;
  });
  </code></pre>
  
  <p>page.jade</p>
  
  <pre><code>  .title Title
    .thumbnail
      img.img-responsive(ng-src='{{pic}}')
      .caption
        .col-xs-12.col-sm-6.text-center
          label Label: 
          button.btn.btn-default.navbar-btn(type='button', ng-model='selectedOne', bs-options='one.value as one.label for pitch in ones', bs-select='')
            | Select 
            span.caret
        .col-xs-12.col-sm-6.text-center
          label Label: 
          button.btn.btn-default.navbar-btn(type='button', ng-model='selectedTwo', bs-options='two.value as two.label for two in twoes', bs-select='')
            | Select
            span.caret
  </code></pre>
  
  <p>And this outputs nothing</p>
  
  <p>page.jade</p>
  
  <pre><code>.content(ng-controller='dtbCtrl')
    .title Title
    .thumbnail
      img.img-responsive(ng-src='{{pic + one.value + two.value}}')
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>$scope.pic = 'http://www.placehold.it/1618x1000?text=';
  </code></pre>