title: How to write directive for to many ng-if condition?
body: <p>I have a simple form in which I am showing simple text, same text with a Tick and hiding same text based on the <code>ng-if</code> conditions. I want to make a directive but i dont know how. I made simple directives but this one seems complicated. </p>
  
  <p>Here is my <strong>html</strong></p>
  
  <pre><code>&lt;ul class="list-unstyled carsure-listing-detail"&gt;
      &lt;li ng-if="!button_clicked &amp;&amp; !checkboxModel.value1"&gt;&lt;input type="checkbox" ng-model="checkboxModel.value1"&gt; Right B Pillar is Non-Accidented&lt;/li&gt;                      
      &lt;li ng-if="button_clicked &amp;&amp; checkboxModel.value1"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;Right B Pillar is Non-Accidented&lt;/li&gt;
      &lt;li ng-if="!button_clicked &amp;&amp; checkboxModel.value1"&gt;&lt;input type="checkbox" ng-model="checkboxModel.value1"&gt; Right B Pillar is Non-Accidented&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>here is my <strong>controller</strong></p>
  
  <pre><code>var mainControllers = angular.module('mainControllers', []);
  mainControllers.controller('StarterController', ['$scope', '$routeParams', function ($scope, $routeParams) {
      $scope.checkboxModel = {};
      $scope.button_clicked = false;
  
      console.log($scope.button_clicked);
      $scope.checksubmit = function () {
          $scope.button_clicked = true;
  
      }
  
  }]);
  </code></pre>
  
  <p>Any suggestions how can i achieve this same functionality ?</p>