Angular Google line chart directive - angularjs

Question

I want to make an angular attribute directive for Google line charts rather than manually load the chart in controllers because the first time when the page loads the chart draws easily and navigate to another page and controller and return back previous page so its not draw chart. Here I am drawing the chart like below but I want to make an angular directive because its not working with page navigation
<ion-view title="Select Medicines" catch-view="false">
<ion-content>
<div class="list med-select inven-l">
<div class="list" style="background-color:52487B;">
<div class="row item item-icon-left item-icon-right item-stable">
<div curve_chart style="width:100%; height: 250px" > </div>
</div>
<div class="row item item-icon-left item-icon-right item-stable" style="margin-bottom: 5px;" ng-click="gotoDetail(weekSales.OrderNo)" ng-repeat="weekSales in WeeklyData.orders | orderBy:'CreatedOn'">
<div class="col col-70">
<h2>{{weekSales.Customer.FName}} {{weekSales.Customer.LName}} </h2>
<p>Order No: MY-{{weekSales.OrderNo}} - {{weekSales.CreatedOn| date : 'dd'}}/{{weekSales.CreatedOn| date : 'MM'}}/{{weekSales.CreatedOn| date : 'yyyy'}}</p>
</div>
<div class="col col-20">
<span style="color:#d5d1e7">₹ {{weekSales.Amount}}</span>
</div>
<div class="col col-10">
<i class="icon ion-chevron-right"></i>
</div>
</div>
</div>
</div>
</ion-content>
angular.module('controllers.Chemist_sales_monthlyCtrl', [])
.controller('Chemist_sales_monthlyCtrl', function($scope, $state, $ionicHistory,serverRepo,$ionicLoading,profileInfo) {
$scope.data = {};
$scope.gotoDetail = function(orderNo){
//alert(orderNo)
profileInfo.orderId=orderNo
$state.go('pannel.chem_order_history_Detail');
}
$scope.myGoBack= function(){
$ionicHistory.goBack()
}
$scope.$on('$ionicView.enter', function() {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop:false
});
serverRepo.salesMonthly().then(function(objS){
console.log(objS)
$scope.monthlyData=objS.data;
angular.forEach(objS.data.orders, function(value, key) {
objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn)
})
var options = {
legend: { position: 'bottom' },
curveType: 'function',
titlePosition: 'in',
axisTitlesPosition: 'in',
hAxis: {
textPosition: 'in',
minValue: 0,
textStyle:{color: "#fff"}
},
vAxis: {
minValue: 0,
maxValue: 13,
textPosition: 'in',
textStyle:{color: "#fff"},
minorGridlines:{color: "#ccc"}
},
lineWidth: 6,
fontSize:11,
chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
colors: ['#32BD76'],
animation:{
duration: 1500,
easing: 'out',
startup: true
}
};
google.charts.setOnLoadCallback( function () {
// Create and populate the data table.
console.log(objS.data.labels)
console.log(objS.data.datasets.data)
var data = new google.visualization.DataTable();
data.addColumn('string', 'labels');
data.addColumn('number', 'data');
for(i = 0; i < objS.data.labels.length; i++)
data.addRow([objS.data.labels[i], objS.data.datasets.data[i]]);
// Create and draw the visualization.
var chart = new google.visualization.LineChart(document.getElementById('curve_chartmonthly')).
chart.draw(data, options);
});
$ionicLoading.hide();
},function(objE){
// alert(JSON.stringify(objE));
console.log("Error:-\n"+JSON.stringify(objE));
$ionicLoading.hide();
});
});
})