title: Protractor + angular error - Element is not clickable at point
body: <p>When trying to test a visible button on a modal window using protractor and angular, I receive the error following error: </p>
  
  <blockquote>
    <p>UnknownError: unknown error: Element is not clickable at point (400, 234). Other element would receive the click: <code>&lt;div class="modal-footer"&gt;...&lt;/div&gt;</code>'.</p>
  </blockquote>
  
  <p>I have tried resizing the window to a larger size in the before each statement, and have tried a scrollTo the top of the page before the click as well. Any suggestions?</p>
  
  <p>Code:</p>
  
  <pre><code>it('should create a new portfolio when modal form is completed', function () {
      portfolio_create_btn.first().click().then();
      element(by.model('portfolios.portName')).sendKeys('Test');
      element(by.css('#portfolio-modal-create-button')).click();
  
      Tabs.filter(function (elem, index) {
          return elem.getTagName('tab-heading').getText();
      }).then(function (filteredElements) {
          expect(filteredElements.length).toEqual(expect_tabs_len_start + 1);
      });
  });
  </code></pre>
  
  <p>Most of the HTML:</p>
  
  <pre><code>        &lt;div class="container-fluid"&gt;
              &lt;h1 class='port-title port-manager-header title custom-inline'&gt;Portfolios&lt;/h1&gt;
  
              &lt;div ng-controller="ModalCtrl" class='create-new-frame'&gt;
                  &lt;!--todo move to a partial or into $templateCache --&gt;
                  &lt;script type="text/ng-template" id="myModalContent.html"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h3 class="modal-title"&gt;Create New Portfolio&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;form name='eventForm' method="POST"&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;input id='create-new-portfolio-input' class='form-control' ng-model='portfolios.portName'
                                     placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="true"&gt;
                              &lt;span class="help-inline" ng-show="notUnique"&gt;Portfolio name already used&lt;/span&gt;
                              &lt;!-- 
                              Private/Group selection to be used in future versions
                              &lt;div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group"&gt;
                                  &lt;label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'"&gt;Group&lt;/label&gt;
                                  &lt;label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'"&gt;Private&lt;/label&gt;
                              &lt;/div&gt; 
                              --&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button class="btn btn-primary" ng-click="ok(portfolios.portName)"
                                      ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'&gt;
                                  Create
                              &lt;/button&gt;
                              &lt;button class="btn btn-warning" ng-click="cancel()" id='portfolio-modal-cancel-button'&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/script&gt;
                  &lt;button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')"&gt;Create New&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="title port-title custom-inline pull-right"&gt;
              &lt;!-- &lt;span class="text-muted"&gt;
                  Organization // user
              &lt;/span&gt; --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>