Why mixing interpolation and expressions is bad practice

Solution 1:

From the Docs:

Why mixing interpolation and expressions is bad practice:

• It increases the complexity of the markup

• There is no guarantee that it works for every directive, because interpolation itself is a directive. If another directive accesses attribute data before interpolation has run, it will get the raw interpolation markup and not data.

• It impacts performance, as interpolation adds another watcher to the scope.

AngularJS Developer Guide - Interpolation

Solution 2:

Directives which expect Boolean values won't work:

ERRONEOUS

<input type="checkbox" ng-hide ="{{x.thenumber === null}}" />

When the expression evaluates to the Boolean value false, interpolation will return the string "false". Strings that have length greater than zero are truthy. The ng-hide directive will always hide and never show the input element.

CORRECT

 <input type="checkbox" ng-hide="x.thenumber === null" />