diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js
index 35b0b9e4d6..ad5c435754 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js
@@ -12,10 +12,10 @@ Use this directive to generate a list of content items presented as a flexbox gr
     <div ng-controller="Umbraco.Controller as vm">
 
         <umb-content-grid
-           content="vm.contentItems"
-           content-properties="vm.includeProperties"
-           on-click="vm.clickItem"
-           on-select="vm.selectItem">
+            content="vm.contentItems"
+            content-properties="vm.includeProperties"
+            on-click="vm.selectItem"
+            on-click-name="vm.clickItem">
         </umb-content-grid>
 
     </div>
@@ -26,15 +26,36 @@ Use this directive to generate a list of content items presented as a flexbox gr
     (function () {
         "use strict";
 
-        function Controller(myService) {
+        function Controller() {
 
             var vm = this;
-            vm.contentItems = [];
-            vm.includeProperties = {
-            {
-                  "alias": "sortOrder",
-                  "header": "Sort"
+            vm.contentItems = [
+                {
+                    "name": "Cape",
+                    "published": true,
+                    "icon": "icon-document",
+                    "updateDate": "15-02-2016",
+                    "owner": "Mr. Batman",
+                    "selected": false
                 },
+                {
+                    "name": "Utility Belt",
+                    "published": true,
+                    "icon": "icon-document",
+                    "updateDate": "15-02-2016",
+                    "owner": "Mr. Batman",
+                    "selected": false
+                },
+                {
+                    "name": "Cave",
+                    "published": true,
+                    "icon": "icon-document",
+                    "updateDate": "15-02-2016",
+                    "owner": "Mr. Batman",
+                    "selected": false
+                }
+            ];
+            vm.includeProperties = [
                 {
                   "alias": "updateDate",
                   "header": "Last edited"
@@ -43,20 +64,17 @@ Use this directive to generate a list of content items presented as a flexbox gr
                   "alias": "owner",
                   "header": "Created by"
                 }
-            };
+            ];
 
             vm.clickItem = clickItem;
             vm.selectItem = selectItem;
 
-            myService.getContentItems().then(function(contentItems){
-                vm.contentItems = contentItems;
-            });
 
-            function clickItem(item){
+            function clickItem(item, $event, $index){
                 // do magic here
             }
 
-            function selectItem(item, event, index) {
+            function selectItem(item, $event, $index) {
                 // set item.selected = true; to select the item
                 // do magic here
             }
@@ -73,8 +91,10 @@ Use this directive to generate a list of content items presented as a flexbox gr
     <h3>The callback returns:</h3>
     <ul>
         <li><code>item</code>: The clicked item</li>
+        <li><code>$event</code>: The select event</li>
+        <li><code>$index</code>: The item index</li>
     </ul>
-@param {callback=} onSelect (<code>binding</code>): Callback method to handle click events on the checkmark icon.
+@param {callback=} onClickName (<code>binding</code>): Callback method to handle click events on the checkmark icon.
     <h3>The callback returns:</h3>
     <ul>
         <li><code>item</code>: The selected item</li>