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 Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<div ng-controller="mainController">
    <script type="text/ng-template" id="myModalContent.html">
        <!-- template for modal -->
            <div class="modal-header">
                <h3 class="modal-title">Choose your products!</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="checkbox" ng-repeat="item in products">
                        <label> 
                            <input type="checkbox" ng-click="chkChange(item)" ng-checked="selected.indexOf(item) !== -1"/>
                            {{item}}
                        </label>
                    </div>    
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
    
    <table class="table">
        <tr>
            <th>User name</th>
            <th>products selected</th>
        </tr>
        <tr ng-repeat="user in userData">
            <td>{{user.name}}</td>
            <td><button ng-click="changeProducts(user)">{{( user.selectedProducts | array ) || 'nothing selected!' }}</button></td>
        </tr> 
    </table>
</div>

CSS

body {
    padding: 5px;
}

JavaScript

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

app.controller('mainController', function($scope, $modal, $log) {
    $scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk'];

    // userData will be later from server with $http.get('/phpscript').success(...)
    // just dummy userData here because no backend available    
    $scope.userData = [
        {
            name: 'John Doe',
            selectedProducts: [
                'coffee',
                'beer',
                'wine']
        },
        {
            name: 'Jane Doe',
            selectedProducts: [
                'coffee',
                'tea']
        }
    ];
    
    $scope.changeProducts = function(userData) {
        //$scope.items = ['item1', 'item2', 'item3'];

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            
            //size: size,
            resolve: {
                user: function() {
                    return userData;
                },
                selectedProducts: function() {
                    return userData.selectedProducts;
                },
                products: function () {
                    //console.log($scope.selectedProducts);
                    return $scope.products; // get all available products
                }
            }
        });
        
        modalInstance.result.then(function (selectedItems) {
            //products = selectedItems;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $http, $modalInstance, products, selectedProducts, user) {

  //console.log('user', user);
  $scope.products = products;
    
  $scope.selected = selectedProducts;

  $scope.chkChange = function(item) {
      console.log(item);
      var index  = $scope.selected.indexOf(item);
      if (index > -1) {
         ...