Angular ng-grid input boxes don't close - angularjs

Question

I am using the example from here:
http://plnkr.co/edit/hy6Evh?p=preview
My module name is different, but other than that it seems the same as the plnkr example.
(function () {
"use strict";
angular.module("productManagement").controller("PriceListCtrl",
["$scope",
PriceListCtrl]);
function PriceListCtrl($scope) {
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }];
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEditOnFocus: true,
enableRowSelection: false,
columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: false },
{ field: 'age', cellFilter: 'number:2', displayName: 'Age' }]
};
}
}());
But when I put it into my application, the input boxes don't close:
In this image, I clicked into the first age row, then the second, then the third. The open input box should close when I click into the second row.
This works correctly in the plnkr ... but not in my application. Any thoughts as to what could be wrong?

Answer 1

I can't believe that this took SO long to resolve... but I found the answer.
Try this plunk: http://plnkr.co/edit/p4iLdfoYydZ9LKU312zK?p=preview
Then try this plunk: http://plnkr.co/edit/hy6Evh?p=preview
In this first case, when you click on the cells for edit and then click on another cell, the edit boxes don't close.
In the second case, the code works fine.
The ONLY difference is the order of the script tags.
This does not work:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
This DOES work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Hope this helps others so they don't waste as much time as I did!