Q:

Why my UI Grid cannot load the grid

Here is my runnable plunker
I followed the tutorial in UI Grid official tutorial. 
I do not know why I cannot load the grid.  I did not find any syntax error. 
Here is part of errors from console:

URL visited /
  editor-1.2.0.js:2 URL visited /?p=catalogue
  emmet.js Failed to load resource: the server responded with a status of 404 (Not Found)
  editor-1.2.0.js:7 AUTH Object
  editor-1.2.0.js:2 Event tracked Plunk Beautify Toolbar undefined undefined
  editor-1.2.0.js:2 Event tracked Plunk Save Toolbar undefined undefined
  editor-1.2.0.js:2 URL visited /oXEt5IfdrpkkPSxysncy?p=catalogue
  editor-1.2.0.js:2 Event tracked Multipane Show Preview Toolbar undefined undefined
  editor-1.2.0.js:2 URL visited /oXEt5IfdrpkkPSxysncy?p=preview
  run.plnkr.co/:1 Mixed Content: The page at 'https://plnkr.co/edit/oXEt5IfdrpkkPSxysncy?p=preview' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'.  This request has been blocked; the content must be served over HTTPS. 

<! DOCTYPE html>
<html ng-app="app">

<head>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
</head>

<body>
    <h1>Hello Plunker!</h1>

    <div ng-controller="MainCtrl">
        <div ui-grid="{ data: myData }" class="myGrid"></div>
    </div>

    <script>
        var app = angular.module('app', ['ui.grid']);
        app.controller('MainCtrl', ['$scope', function($scope) {
            $scope.myData = [{
                    "firstName": "Cox",
                    "lastName": "Carney",
                    "company": "Enoromo",
                    "employed": true
                }, {
                    "firstName": "Lorraine",
                    "lastName": "Wise",
                    "company": "Comveyer",
                    "employed": false
                }, {
                    "firstName": "Nancy",
                    "lastName": "Waters",
                    "company": "Fuelton",
                    "employed": false
                }
            ];
        }])
    </script>

    <style>
        .myGrid {
            width: 500 px;
            height: 250 px;
        }
    </style>
</body>

</html>

A:

Your cdn for ui-grid was not correct.  And all your src should point to a secure url i.e with https.  The reason is you are trying to access an unsecure script from a secure site.  This will be blocked since content can be served over only HTTPS. 
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.js"></script>
  </head>

Working Plunkr:https://plnkr.co/edit/I87wgFzlqmtl6dcPem6F?p=preview

