title: How to hide the DOM element with ngShow/ngHide when condition is not met?
body: <p>I have a <code>DOM</code> element that looks like</p>
  
  <pre><code>                    &lt;div data-ng-if="allControllerFieldsAreProvided($index)" class="test-controller-connection"&gt;
                          &lt;a href="" ng-click="fetchUsersFromDataSource($index, 10)"&gt;Test Connection&lt;/a&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>the function looks like  </p>
  
  <pre><code> $scope.allControllerFieldsAreProvided = function (adSetupIndex) {
                          return $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].name.length &gt; 0 &amp;&amp;
                                 $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.host.length &gt; 0 &amp;&amp;
                                 $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.port.length &gt; 0 &amp;&amp;
                                 $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.userName.length &gt; 0 &amp;&amp;
                                 $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.password.length &gt; 0;
                      };
  </code></pre>
  
  <p>Initially, when no input is provided, the <code>DOM</code> element is hidden, then when all the inputs are provided, the <code>DOM</code> element appears.</p>
  
  <p><strong>Problem</strong><br>
  The issue start when any of the input is deleted again (example, text deleted from input box). In such scenarios, the <code>DOM</code> element should disappear, but it is not  </p>
  
  <p>How do I fix this?</p>