AngularJS: disable button when input fields are empty
<p>I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including <a href="https://stackoverflow.com/questions/15300067/disable-submit-button-when-form-invalid-with-angularjs">this one</a> and <a href="https://stackoverflow.com/questions/18261003/angularjs-form-custom-validation-check-if-at-least-one-input-is-empty">this one</a> but none of these are working for me. Below is my code. Thanks</p>

<pre><code>&lt;form name="myForm"&gt;
  Select an option:
  &lt;select id="dropDown" name="dropDown" ng-model="data.dropDown" &gt;
    ** content for dropDown menu, populating it by using Django
  &lt;/select&gt;
  From Date:
  &lt;input type="text" id="dateFrom" ng-model="data.date1" /&gt;
  To Date:
  &lt;input type="text" id="dateTo" ng-model="data.date2"   /&gt;

  &lt;button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown &amp;&amp; !!data.date1  &amp;&amp; !!data.date2)"&gt;Submit &lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>I also tried this method below:</p>

<pre><code>&lt;form name="myForm"&gt;
  Select an option:
  &lt;select id="dropDown" name="dropDown" ng-model="data.dropDown" &gt;
    ** content for dropDown menu, populating it by using Django
  &lt;/select&gt;
  From Date:
  &lt;input type="text" id="dateFrom" ng-model="data.date1" required/&gt;
  To Date:
  &lt;input type="text" id="dateTo" ng-model="data.date2" required /&gt;
  &lt;button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid"&gt;Submit &lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>So initially when the page loads and all fields are empty by default, the <code>Submit</code> button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks</p>