title: Timing of AngularJS 'compiler' at load does not put a span into an angular-translate string
body: <p>I have an Angular partial page containing a form. In one of the input headings I want to show the currency based on the country selected. The currency symbol is in a span inside a JSON string that is loaded by angular-translate. On page load of the partial, no currency symbol appears in the input heading. If the user changes the country, the currency symbol for that country appears in the heading. Its some timing issue on the following relevant code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;label for="price" translate&gt;PRICE&lt;/label&gt;
  &lt;input type="text" id="price" name="price" data-ng-model="cntrl.input.price" size="12" maxlength="12" /&gt;
  </code></pre>
  
  <p>JSON string for the English translation</p>
  
  <pre><code>"PRICE": "Price &lt;span id='currencySymbol'&gt;&lt;/span&gt;&lt;span class='required'&gt;(Required)&lt;/span&gt;"
  </code></pre>
  
  <p>Angular controller - using John Papa's style guide for controller as</p>
  
  <pre><code>function InputFormController( $translate, $translatePartialLoader, selectCountryTranslateFactory, $timeout, $scope ) {
  var cntrl = this;
  cntrl.input = {};
  //set country in select tag for page load
  cntrl.input.countrySelected = "US";
  $scope.$watch( "cntrl.input.countrySelected", function( newVal, oldVal ) { 
      setCurrencySymbol( cntrl.input.countrySelected ); //TEST
  });
  
  function setCurrencySymbol() { //TEST
      var targetSpan = document.getElementById( "currencySymbol" );
      switch ( cntrl.input.countrySelected ) {
          case 'US':
              targetSpan.innerHTML = " $"; //Error: targetSpan is null - on page load, but displays symbol after user selects a different country
          break;
          case 'CA':
              targetSpan.innerHTML = " C$";
          break;
          default:
              //show no symbol
              targetSpan.innerHTML = "";
          break;          
      }
  }
  </code></pre>
  
  <p>To be clear, I get Price (Required) on page load with US as the default country. If I change to Canada, I get Price C$ (Required) If I change back to US, I get Price $ (Required)</p>
  
  <p>I'm using Angular 1.3.7  How does one get the span to load after angular-translate loads - or is there some other approach for making the setCurrencySymbol function?</p>