diff --git a/sample/views/main.html b/sample/views/main.html
index 6222b86..9dbbbd7 100755
--- a/sample/views/main.html
+++ b/sample/views/main.html
@@ -1,4 +1,4 @@
 <div>
-	<chart value='{{basicAreaChart}}' type="area" height="400">
+	<chart value='basicAreaChart' type="area" height="400">
 	</chart>
 </div>
\ No newline at end of file
diff --git a/src/directives/highchart.js b/src/directives/highchart.js
index b7652fa..ba1cf98 100755
--- a/src/directives/highchart.js
+++ b/src/directives/highchart.js
@@ -6,6 +6,9 @@ angular.module('chartsExample.directives',[])
   return {
     restrict: 'E',
     template: '<div></div>',
+    scope: {
+        chartData: "=value"
+    },
     transclude:true,
     replace: true,
 
@@ -18,16 +21,16 @@ angular.module('chartsExample.directives',[])
           width: attrs.width || null
         }
       };
-
+      
         //Update when charts data changes
-        scope.$watch(function() { return attrs.value; }, function(value) {
-          if(!attrs.value) return;
+        scope.$watch(function() { return scope.chartData; }, function(value) {
+          if(!value) return;
             // We need deep copy in order to NOT override original chart object.
             // This allows us to override chart data member and still the keep
             // our original renderTo will be the same
             var deepCopy = true;
             var newSettings = {};
-            $.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value));
+            $.extend(deepCopy, newSettings, chartsDefaults, scope.chartData);
             var chart = new Highcharts.Chart(newSettings);
         });
       }