Angularjs demo with modal popup

Coded for this SO question: http://stackoverflow.com/questions/29807422/creating-popup-window-with-form-content-and-then-show-output-in-parent-page-and?

by aman1981

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app ="myApp">

  <div ng-controller="Ctrl">
    <h3 class="">Create New</h3>


      <form role="form" name="newForm" class="form-horizontal" submit="newFormSubmit(newForm.$valid)" novalidate>
        <div class="form-group">
            <label class="col-sm-4 control-label">Choose Status</label>
            <div class="col-sm-6" ng-class="{ 'has-error': newForm.status.$invalid && (newForm.status.$touched || newForm.$submitted) }">
                <select ng-model="status" name="status" class="form-control input-medium" ng-options="status.text for status in statusarray" required >
                    <option value="">Please select status...</option>
                </select>
                <p ng-show="newForm.status.$invalid && (newForm.status.$touched || newForm.$submitted)" class="help-block">Status is required.</p>                
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">Enter Name</label>
            <div class="col-sm-6" ng-class="{ 'has-error': newForm.name.$invalid && (newForm.name.$touched || newForm.$submitted) }">
                <input type="text" name="name" ng-model="name" required class="form-control input-small" />
                <p ng-show="newForm.name.$invalid && (newForm.name.$touched || newForm.$submitted)" class="help-block">Name is required.</p>
            </div>
        </div>
       
            
                <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
                <button class="btn btn-primary" type="submit">Create</button>
            
    </form>
    
      </div>

</div>

CSS

body {
    padding: 5px;
}

JavaScript

var app = angular.module('myApp', []);


app.controller('Ctrl', ['$scope',
  function ($scope) {   
  
     $scope.statusarray = [
            { id: 1, text: "Approved" },
            { id: 2, text: "Denied" },
            { id: 3, text: "Pending" },
            { id: 4, text: "Rejected" }            
        ];
    
}]);