Decorating AngularJS Directive template inside the directive
<p>I have a directive which is defined, say, as below:</p>

<pre><code>angular.module('some-module').directive('someDirective', function() {
  return {
  restrict: 'E',
  replace: 'true',
  templateUrl: 'some-template.html',
  link: link,
  require: '^form',
  transclude: true,
  scope: {
  decorate: '=',
  }
 };
});
</code></pre>

<p>Let's say this is how the some-template.html looks (there is more in the actual template though):</p>

<pre><code>&lt;div ng-transclude&gt;&lt;/div&gt;
</code></pre>

<p>And this is how I will use the directive:</p>

<pre><code>&lt;some-directive decorate="true"&gt;
  &lt;input name="x" type="number" ng-model="x"&gt;
  &lt;input name="y" type="number" ng-model="y"&gt;
&lt;/some-directive&gt;
&lt;some-directive decorate="false"&gt;
  &lt;input name="a" type="number" ng-model="a"&gt;
  &lt;input name="b" type="number" ng-model="b"&gt;
&lt;/some-directive&gt;
</code></pre>

<p>What I want the directive to do is to manipulate the DOM so that if <code>decorate</code> is <code>true</code> then, the two input fields should be decorated with some <code>div</code>s as below:</p>

<pre><code>      &lt;div class="some-outer-class"&gt;
           &lt;div class="some-class-1"&gt;
              &lt;input name="x" type="number" ng-model="x"&gt;
            &lt;/div&gt;
            &lt;div class="some-class-2"&gt;
               &lt;input name="y" type="number" ng-model="y"&gt;
            &lt;/div&gt;
            &lt;div&gt;&lt;i class="some-glyph-icon"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
</code></pre>

<p>If the <code>decorate</code> attribute is false, or absent, the directive shouldn't do any manipulation.</p>

<p>Couldn't figure out how to do this. Any help is appreciated.</p>