Chart Js + Angular - angularjs

Question

Am I missing something here? For two days i have looked through this code to see the issue just to get started. I am testing out the Chart Js plugin and I intend to use angular with it.
Seems like there is some sort of conflict with my code that dosent let either of the scripts to run. Please help
//Charts//
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var LineChart = new Chart(ctx).Line(data);
//Data//
data = {
labels : ["January", "February", "March", "April", "May", "June", "July"],
datasets : [{
data:[65, 59, 80, 81, 56, 55, 40]
}]
};
var app = angular.module('myApp',[]);
app.controller('MainController', function($scope){
$scope.Title = 'My Charts';
});
http://plnkr.co/edit/RXzjPllg0RSWjvgMjIoU?p=preview

Answer 1

Got your chart working for you
http://plnkr.co/edit/YrI6RtQTkJkZde3Ynnhq?p=preview
var app = angular.module('Chart', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.greet = 'My Charts';
data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var LineChart = new Chart(ctx).Line(data);
}]);
//Data//

Answer 2

here's an example that worked for me.
in your page.html...
<!-- in head tag include: jquery.js jquery-ui.js bootstrap.js angular.js chart.js angular-chart.js angular-chart.css then this js -->
<script type="text/javascript">
var app = angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope, $http) {
// get example [{"January":10},{"February":20},{"March":50},{"April":30},{"May":20},{"June":10},{"July":10}]
$http.get('http://mywebsite/myjsondata').
success(function(data) {
var labelArray = [];
var dataArray = [];
angular.forEach(data, function(item){
var jsObj = angular.fromJson(item);
for (var prop in jsObj) {
//alert(prop + " is " + jsObj[prop]);
labelArray.push(prop);
dataArray.push(parseInt(jsObj[prop]));
}
});
//$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
// $scope.data = [[10, 20, 50, 30, 20, 10, 10]];
$scope.labels = labelArray;
$scope.data = [dataArray];
$scope.series = ['Send Totals']; // Series A
})
.error(function() {
alert("Sorry. Unable to retrieve the data.");
});
</script>
... in the body put this
<div class="col-lg-6 col-sm-12 ng-scope" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick" >
</canvas>
</div>
</div>
</div>