title: AngularJS - Attach Alert Popup to Empty Input
body: <p>I'm trying to configure my app to show an alert when the user tries to submit a form with an empty input box, but can't get it working even though I've a confirmation popup elsewhere in the same application.</p>
  
  <p>Any ideas why this code might not be working?</p>
  
  <p>Codepen: <a href="http://codepen.io/anon/pen/VpjgJJ" rel="nofollow noreferrer">http://codepen.io/anon/pen/VpjgJJ</a>.</p>
  
  <p>JS:</p>
  
  <pre><code>$scope.addTask = function() {
          if ($scope.taskName.length == "") {
              $scope.showAlert = function(ev) {
                  $mdDialog.show(
                      $mdDialog.alert()
                          .parent(angular.element(document.querySelector('#popupContainer')))
                          .clickOutsideToClose(true)
                          .title('Error')
                          .textContent('You must enter a task name')
                          .ok('Close')
                          .targetEvent(ev)
                  )
              }
          }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form class="md-padding"&gt;
  
    &lt;div layout-gt-sm="row"&gt;
  
    &lt;md-input-container class="md-block" flex-gt-sm&gt;
  
      &lt;label&gt;Add New Task&lt;/label&gt;
  
      &lt;input type="text" ng-model="taskName" size="50"&gt;
  
    &lt;/md-input-container&gt;
  
  &lt;/div&gt;
  
  &lt;md-button ng-click="addTask()" class="md-raised md-primary"&gt;Add&lt;/span&gt;&lt;/md-button&gt;
  </code></pre>
  
  <p></p>