Create childscope only when required and destroy it after use. https://github.com/openstf/stf/issues/124

res/app/device-list/column/device-column-service.js

@@ -18,7 +18,7 @@ var filterOps = {
   }
 }
 
-module.exports = function DeviceColumnService($filter, $compile, gettext) {
+module.exports = function DeviceColumnService($filter, gettext) {
   // Definitions for all possible values.
   return {
     state: DeviceStatusCell({
@@ -252,14 +252,8 @@ module.exports = function DeviceColumnService($filter, $compile, gettext) {
         return device.provider ? device.provider.name : ''
       }
     })
-  , notes: XEditableCell({
+  , notes: DeviceNoteCell({
       title: gettext('Notes')
-    , compile: $compile
-    , scopeRequired: true
-    , attrs: {
-        model: 'device.notes'
-      , onbeforesave: 'updateNote(device.serial, $data)'
-    }
     , value: function(device) {
         return device.notes || ''
       }
@@ -620,30 +614,31 @@ function DeviceStatusCell(options) {
   })
 }
 
-function XEditableCell(options) {
+function DeviceNoteCell(options) {
   return _.defaults(options, {
     title: options.title
   , defaultOrder: 'asc'
-  , build: function (scope) {
-      var td = document.createElement('td')
-        , a  = document.createElement('a')
+  , build: function () {
+    var td = document.createElement('td')
+      , span = document.createElement('span')
+      , i = document.createElement('i')
 
-      // Ref: http://vitalets.github.io/angular-xeditable/#text-simple
-      a.setAttribute('href', '#')
-      a.setAttribute('editable-text', options.attrs.model)
-      a.setAttribute('onbeforesave', options.attrs.onbeforesave)
+      td.className = 'device-note'
+      span.className = 'xeditable-wrapper'
+      span.appendChild(document.createTextNode(''))
 
-      a.appendChild(document.createTextNode(options.attrs.model))
-      td.appendChild(a)
+      i.className = 'device-note-edit fa fa-pencil pointer'
+
+      td.appendChild(span)
+      td.appendChild(i)
 
-      // compile with new scope
-      options.compile(td)(scope)
       return td
     }
   , update: function(td, item) {
-      var a = td.firstChild
-        , t = a.firstChild
-      t.nodeValue = options.value(item) || 'click to add'
+      var span = td.firstChild
+        , t = span.firstChild
+
+      t.nodeValue = options.value(item)
       return td
     }
   , compare: function(a, b) {