title: How to override / compliment ng-class in a directive with a template with replace: true
body: <p><strong>Without removing</strong> <code>replace: true</code>, how can <code>ng-class</code> be used on the directive below without causing an error / conflict with the template <code>ng-class</code>?</p>
  
  <p>Currently, this throws the following Angular error:</p>
  
  <blockquote>
    <p>Error: Syntax Error: Token '{' is an unexpected token at column 16 of
    the expression [{custom: true} {custom:settings=='custom', other:
    settings=='other'}] starting at [{custom:settings=='custom', other:
    settings=='other'}].</p>
  </blockquote>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-app="MyApp" ng-controller="MyCtrl"&gt;
    &lt;setting settings="settings.someProperty" 
      ng-class="{custom: true}" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var myApp = angular.module('MyApp', []);
  
  myApp.controller('MyCtrl', function($scope) {
    $scope.settings = {
      someProperty: ''
    }
  });
  
  myApp.directive('setting', function() {
    return {
      restrict: 'E',
      // Removing this is NOT an option
      replace: true,
      require: '^myCtrl',
      template: '&lt;div ng-class="{myclass:settings==\'custom\', other: settings==\'other\'}"&gt;&lt;input type="radio"  name="mySetting" ng-model="settings" value="other" /&gt;TEST&lt;/div&gt;',
      scope: {
        settings: '=',
      }
    };
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/cale_b/3jcmLh0t/22/" rel="nofollow">jsFiddle of this setup</a></p>