<?php
    global $csv;
    $csv = array_map('str_getcsv', file('../data/file.csv'));
    array_walk($csv, function(&$a) use ($csv) {
        $a = array_combine($csv[0], $a);
    });
    array_shift($csv); # remove column header
    header('Content-Type: application/json');
    echo json_encode($csv);
    ?>

<div class="modal fade" id="myModal1" role="dialog" >
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title"><?php echo "Grade for $firstname $lastname" ?></h4>

        </div>
        <div class="modal-body">
        <p id="grade"></p>
        </div>

          <br>
          <br>

        <div class="modal-footer">
              <div ng-controller="PopoverDemoCtrl">




    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="Change Grade" type="button" class="btn btn-default padit">Change Grade</button>

    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div class="form-group">

      <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
        </div>
    </script>




          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script>
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
  $scope.dynamicPopover = {
    templateUrl: 'myPopoverTemplate.html',
  };

  $scope.placement = {
    options: [
      'A',
      'A-',
      'B+',
      'B',
      'C+',
      'C',
      'C-',
      'D+',
      'D',
      'D-',
      'F',
      'new grade'
    ],
    selected:  'new grade'
  };
});
  </script>