title: Angularjs add bootstrap classes dynamically using directive
body: <p>We are implementing reusable code in our application for this purpose we have created a simple directive which displays content.</p>
  
  <p>Directive Code:</p>
  
  <pre><code>angular.module("newsStore.moduleDirectives", [])
      .directive('renderAboutContent', ['aboutService', renderAboutContent]);
  
  function renderAboutContent(aboutService) {
      return {
          restrict: 'AE',
          scope: {},
          templateUrl: 'templates/about.html',
          link: function (scope, element) {
              aboutService.getAboutContent()
                  .then(function (results) {
                      scope.aboutList = results.aboutContent.listItems;
                  }, function (error) {
                      console.log('controller error', error);
                  });
          }
      }
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList"&gt;
      &lt;div class="col-md-2 form-group" ng-if="content.image"&gt;
          &lt;img src="{{content.image}}" class="img-responsive" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-9"&gt;
          &lt;span class="guidedTourText"&gt;&lt;b&gt;{{content.title}}&lt;/b&gt;&lt;/span&gt;
          &lt;br&gt;
          &lt;span&gt;{{content.description}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Question:</p>
  
  <p>In the above HTML you can see col-md-2 and col-md-9 inside col-md-12, let's say I have three div elements, and three of them occupies 4, 4 ,4 if the content is present. Let's say if the content is not present in the last div then the remaining two div's should take 6,6 and vice versa. We want this to be implemented from the directive.</p>
  
  <p>Let me know if I am not clear.</p>