title: What is the AngularJS way of handling a modal like this
body: <p>I know you're not supposed to put your display logic inside of a controller and I'm struggling with the proper AngularJS way to approach this. </p>
  
  <p>I'm presenting forms inside modals. I'm using Zurb Foundation's reveal for the modal.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="button" ng-click="modalAddWidget"&gt;Add Widget&lt;/div&gt;
  &lt;div id="modalAddWidget" class="reveal-modal"&gt;
    &lt;h6&gt;New Widget&lt;/h6&gt;
    &lt;form&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Widget Name&lt;/legend&gt;
        &lt;input type="text" ng-model="ui.add_widget_value" /&gt;
      &lt;/fieldset&gt;
      &lt;div class="small button right" ng-click="addWidget()"&gt;Add Widget&lt;/div&gt;
      &lt;div class="small button right secondary" ng-click="addWidgetCancel()"&gt;Cancel&lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>  ...
    $scope.modalAddWidget = function() {
      $("#modalAddWidget").reveal();
    }
    $scope.addWidget = function() {
      $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
      $scope.ui.add_widget_value = '';
      $('#modalAddWidget').trigger('reveal:close');
    }
    $scope.addBudgetCancel = function() {
      $scope.ui.add_widget_value = '';
      $('#modalAddWidget').trigger('reveal:close');
    }
    ...
  </code></pre>
  
  <p>Note: $scope.ui is an object I am using to store UI values that shouldn't be bound to my object until the user actually clicks "Add Widget"</p>
  
  <p>$scope.myobj is where my data is stored.</p>
  
  <p>Foundation's <code>$("#modalAddWidget").reveal();</code> function presents the modal overlay.</p>
  
  <p>Since I shouldn't be putting my display code inside the controller, what is the proper way to approach this?</p>