title: AngularJS Directive Passing String
body: <p>This directive is trying to create an HTML element called progress bar that tracks progress as you move page to page. I'm trying to develop it to be used as : 
      <code>&lt;progress-bar progress='1' max='6' error="true"&gt;&lt;/progress-bar&gt;</code></p>
  
  <p>I'm simply trying to pass the information from the ^^element in html to my directive and process the information to change the progress bar appropriately.</p>
  
  <p>This is working for "progress" and "max" which take integer values, but for some reason the commented out code, which would process "error" (which is a string) is causing problems. I'm new to angularJS so I'm sorry if any of this sounds confusing or unclear... please ask if I need to elaborate/clarify. Thanks in advance!</p>
  
  <pre><code>app.directive('progressBar', function(){
  
  var compileProgressBar = function(scope, elem, attrs) {
      var append = '&lt;nav class="navbar navbar-fixed-bottom navbar-footer" role="navigation"&gt;\
                      &lt;div class="container"&gt;\
                          &lt;div class="row"&gt;';
      var i = 1;
      while (i &lt;= parseInt(scope.max)) {
          if (i &lt;= parseInt(scope.progress)) {
              //if (scope.error == "true"){
                  //...
              //}
              //else {
              append += '&lt;div class="col-xs-1"&gt;&lt;div class="circle-filled"&gt;&lt;center&gt;'+i+'&lt;/center&gt;&lt;/div&gt;&lt;/div&gt;'
              //}
          } else {
              append += '&lt;div class="col-xs-1"&gt;&lt;div class="circle-hallow"&gt;&lt;center&gt;'+i+'&lt;/center&gt;&lt;/div&gt;&lt;/div&gt;'
          }
          i++;
      }
      append += '&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;'
      elem.append(append);
      elem.bind('click', function(){
          if (scope.progress &gt; 1) {
              history.back();
              scope.$apply();
          }
      });
  }
  
  return {
      restrict: 'AE',
      scope: {
          max: '=max',
          progress: '=progress'
          //error: '=error'
      },
      link: compileProgressBar
  }
  </code></pre>
  
  <p>});</p>