menacestudio/controller.js

## controller.js
(function(app) {

  app.controller('Ctrl', Ctrl);
  app.controller('CtrlModal', CtrlModal);

  //Ctrl.$inject = ['$scope', '$modal', 'dataservice'];

  function Ctrl($scope, $modal, dataservice) {
    var vm = this;

    // This will come from a service or bootstrapped data
    vm.complaints = function(){
      return dataservice.getComplaints();
    }();

    // Add or update
    vm.addUpdate = function(complaint) {
      var complaintId = complaint.complaintId;
      var mod = $modal.open({
        controller: 'CtrlModal',
        templateUrl: 'modal',
        resolve: {
          complaint: function() {
            return complaint;
          },
          complaints: function(){
            return vm.complaints;
          }
        }
      });
    };
  }

  function CtrlModal($scope, $modalInstance, dataservice, complaint) {
    var vm = this;

    $scope.options = {};
    $scope.options.states = dataservice.getStates();

    $scope.complaint = complaint;

    $scope.save = function() {
      console.log($scope.complaint);
      $modalInstance.dismiss('cancel');
    }

    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    }
  }
})(angular.module('app'));

## core.js
(function(){
    angular.module('app', ['ui.bootstrap']);
})();

## index.html
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js" data-semver="0.12.0" data-require="angular-ui-bootstrap@*"></script>

    <link href="style.css" rel="stylesheet" />
    <script src="core.js"></script>
    <script src="services.js"></script>
    <script src="controllers.js"></script>

  </head>

  <body ng-app="app">

    <div id="main" ng-controller="Ctrl as ctrl">
    <a href="#" ng-click="ctrl.addUpdate({ complaintId: 0 })">Add New</a>

    <table class="table table-striped">
        <thead>
          <tr><td>Actions</td><td>Name</td></tr>
        </thead>
        <tbody>
          <tr ng-repeat="complaint in ctrl.complaints">
            <td><a href="#" ng-click="ctrl.addUpdate(complaint)">Edit</a></td>
            <td>{{ complaint.name }}</td>
          </tr>
        </tbody>
      </table>

    <script type="text/ng-template" id="modal">
      <div class="modal-header">
            <h3 class="modal-title">Id: {{ complaint.complaintId }}</h3>
        </div>
        <div class="modal-body">
            <form class="form">
              <div class="row">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" class="form-control" ng-model="complaint.name" />
                </div>
                <div class="form-group">
                  <label for="states">States</label>
                  <select class="form-control" name="states" ng-options="state.name for state in options.states" ng-model="complaint.state">
                    <option value="">- Select One -</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="employees">Employees</label>
                  <select class="form-control" name="employees" ng-options="employee.name for employee in options.employees" ng-model="complaint.employee">
                    <option value="">- Select One -</option>
                  </select>

                  <a href="#" ng-click="addEmployee()">Add an Employee</a>
                </div>

                <div class="form-group">
                  <div class="radio">
                    <label>
                      <input type="radio" name="isInternal" id="isInternal1" value="1" ng-model="isInternal">
                      Employee
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="isInternal" id="isInternal2" value="2" ng-model="isInternal">
                      External Employee
                    </label>
                  </div>
                </div>

                <div class="form-group" ng-show="isInternal=='1'">
                  <select name="employeeName" ng-model="employeeName">
                    <option value="">- Select One -</option>
                  </select>
                </div>

                <div class="form-group" ng-show="isInternal=='2'">
                  <input type="text" name="externalEmployeeName" class="form-control" />
                  <button ng-click="addExternalEmployee">Add Employee</button>
                </div>

                </div>
              </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="save()">Submit</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <script type="text/ng-template" id="complaints">

    </script>

    </div>
  </body>

</html>

## services.js
(function(app){
  app.factory('dataservice', function(){
    return {
      getComplaints: getComplaints,
      getStates: getStates
    };

    function getComplaints(){
      return [
        {complaintId: 1, name: 'alexander'},
        {complaintId: 2, name: 'dennis'}];
    }

    function getStates(){
      return [
        {name: 'California', value: 'CA'},
        {name: 'New York', value: 'NY'}];
    }
  });
})(angular.module('app'));
	(function(app) {

	app.controller('Ctrl', Ctrl);
	app.controller('CtrlModal', CtrlModal);

	//Ctrl.$inject = ['$scope', '$modal', 'dataservice'];

	function Ctrl($scope, $modal, dataservice) {
	var vm = this;

	// This will come from a service or bootstrapped data
	vm.complaints = function(){
	return dataservice.getComplaints();
	}();

	// Add or update
	vm.addUpdate = function(complaint) {
	var complaintId = complaint.complaintId;
	var mod = $modal.open({
	controller: 'CtrlModal',
	templateUrl: 'modal',
	resolve: {
	complaint: function() {
	return complaint;
	},
	complaints: function(){
	return vm.complaints;
	}
	}
	});
	};
	}

	function CtrlModal($scope, $modalInstance, dataservice, complaint) {
	var vm = this;

	$scope.options = {};
	$scope.options.states = dataservice.getStates();

	$scope.complaint = complaint;

	$scope.save = function() {
	console.log($scope.complaint);
	$modalInstance.dismiss('cancel');
	}

	$scope.cancel = function() {
	$modalInstance.dismiss('cancel');
	}
	}
	})(angular.module('app'));
	<!DOCTYPE html>
	<html>

	<head>
	<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
	<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
	<script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
	<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js" data-semver="0.12.0" data-require="angular-ui-bootstrap@*"></script>

	<link href="style.css" rel="stylesheet" />
	<script src="core.js"></script>
	<script src="services.js"></script>
	<script src="controllers.js"></script>

	</head>

	<body ng-app="app">

	<div id="main" ng-controller="Ctrl as ctrl">
	<a href="#" ng-click="ctrl.addUpdate({ complaintId: 0 })">Add New</a>

	<table class="table table-striped">
	<thead>
	<tr><td>Actions</td><td>Name</td></tr>
	</thead>
	<tbody>
	<tr ng-repeat="complaint in ctrl.complaints">
	<td><a href="#" ng-click="ctrl.addUpdate(complaint)">Edit</a></td>
	<td>{{ complaint.name }}</td>
	</tr>
	</tbody>
	</table>

	<script type="text/ng-template" id="modal">
	<div class="modal-header">
	<h3 class="modal-title">Id: {{ complaint.complaintId }}</h3>
	</div>
	<div class="modal-body">
	<form class="form">
	<div class="row">
	<div class="form-group">
	<label for="name">Name</label>
	<input type="text" name="name" class="form-control" ng-model="complaint.name" />
	</div>
	<div class="form-group">
	<label for="states">States</label>
	<select class="form-control" name="states" ng-options="state.name for state in options.states" ng-model="complaint.state">
	<option value="">- Select One -</option>
	</select>
	</div>
	<div class="form-group">
	<label for="employees">Employees</label>
	<select class="form-control" name="employees" ng-options="employee.name for employee in options.employees" ng-model="complaint.employee">
	<option value="">- Select One -</option>
	</select>

	<a href="#" ng-click="addEmployee()">Add an Employee</a>
	</div>

	<div class="form-group">
	<div class="radio">
	<label>
	<input type="radio" name="isInternal" id="isInternal1" value="1" ng-model="isInternal">
	Employee
	</label>
	</div>
	<div class="radio">
	<label>
	<input type="radio" name="isInternal" id="isInternal2" value="2" ng-model="isInternal">
	External Employee
	</label>
	</div>
	</div>

	<div class="form-group" ng-show="isInternal=='1'">
	<select name="employeeName" ng-model="employeeName">
	<option value="">- Select One -</option>
	</select>
	</div>

	<div class="form-group" ng-show="isInternal=='2'">
	<input type="text" name="externalEmployeeName" class="form-control" />
	<button ng-click="addExternalEmployee">Add Employee</button>
	</div>

	</div>
	</div>
	</form>
	</div>
	<div class="modal-footer">
	<button class="btn btn-primary" ng-click="save()">Submit</button>
	<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
	</div>
	</script>
	<script type="text/ng-template" id="complaints">

	</script>

	</div>
	</body>

	</html>
	(function(app){
	app.factory('dataservice', function(){
	return {
	getComplaints: getComplaints,
	getStates: getStates
	};

	function getComplaints(){
	return [
	{complaintId: 1, name: 'alexander'},
	{complaintId: 2, name: 'dennis'}];
	}

	function getStates(){
	return [
	{name: 'California', value: 'CA'},
	{name: 'New York', value: 'NY'}];
	}
	});
	})(angular.module('app'));