title: Template for directive must have exactly one root element
body: <p>I am new to angularJs. I am trying to create new directive which contains input element and a button. I want to use this directive to clear input text when button is clicked.</p>
  
  <p>When I use my directive in html I am getting below error :</p>
  
  <pre><code>Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element. 
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="input-group"&gt;
           &lt;cw-clearable-input ng-model="attributeName"&gt;&lt;/cw-clearable-input&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>clearable_input.js:</p>
  
  <pre><code>angular.module('cw-ui').directive('cwClearableInput', function() {
    return {
      restrict: 'EAC',
      require: 'ngModel',
      transclude: true,
      replace: true,
      template: '&lt;input type="text" class="form-control"/&gt;&lt;span class="input-group-btn"&gt;&lt;button type="button" class="btn" ng-click="" title="Edit"&gt;&lt;span class="glyphicon-pencil"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;',
      controller: function( $scope ) {
  
      }
  };
  });
  </code></pre>
  
  <p>I am not able to figure it out how to achieve this. </p>