AngularJS Directive Passing String

In your directive, you're using the bi-directional binding of attributes from the global scope to the directive local scope.

In this mode, the attribute value in the html is evaluated as an expression and thus your directive tries to bind its local scope.error to the result of evaluating true as an expression.

When you test scope.error == "true", you're actually testing true == "true" and this evaluates to false in javascript.

To fix your problem, you can:

• either use a quoted string when calling your directive:

  <progress-bar progress='1' max='6' error="'true'"></progress-bar>
  

• or change your binding mode in your directive since you don't need the bi-directional binding. @ variables are always of type string.

  return {
      restrict: 'AE',
      scope: {
         max: '@max',
         progress: '@progress',
         error: '@error'
      },
      link: compileProgressBar
  }
  

You can find more information on the binding modes in Angular $compile documentation