javascript - Need help adding Chart.js chart to a Modal window (I'm Using AngularJS) -

i'm new things web development related. i've been building prototype website past couple of weeks using angularjs. due flawed understanding of how angular works redirecting webpages , breaking app; @ time didn't matter quick prototype ideas down.
however, want build more realistic, , app must run on 1 page. instead of redirects using in original prototype i've decided implement modals display data within app. has been going far, can click on item in list , modal window opens , displays correct data related item selected, except is, graphs.

i'm not sure how should implement graphs in model, or more accurate, how can select canvas element add graph it.

i'm using templateurl modal, , controller handle modal functionality.

since knowledge of javascript dodgy @ best, i've spend of today going on basics of javascript , jquery (i've been working angular couple of weeks now).

on static pages use charts described in chart.js documentation.

<script>                         var data = {                             labels: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],                             datasets: [                                 {                                     label: "my first dataset",                                     fillcolor: "rgba(220,220,220,0.2)",                                     strokecolor: "rgba(220,220,220,1)",                                     pointcolor: "rgba(220,220,220,1)",                                     pointstrokecolor: "#fff",                                     pointhighlightfill: "#fff",                                     pointhighlightstroke: "rgba(220,220,220,1)",                                     data: [65, 59, 80, 81, 56, 55, 40, 80, 81, 56, 55, 40]                                 },                                 {                                     label: "my second dataset",                                     fillcolor: "rgba(151,187,205,0.2)",                                     strokecolor: "rgba(151,187,205,1)",                                     pointcolor: "rgba(151,187,205,1)",                                     pointstrokecolor: "#fff",                                     pointhighlightfill: "#fff",                                     pointhighlightstroke: "rgba(151,187,205,1)",                                     data: [28, 48, 40, 19, 86, 27, 90, 86, 27, 90, 90, 2]                                 }                             ]                          }                         var ctx = document.getelementbyid("mychart").getcontext("2d");                         var options = {responsive: true};                         var mynewchart = new chart(ctx).line(data, options);  </script> 

this works fine when it's added html page contains <canvas> element, doesn't work if include in modal template. here's modal template (without javascript):

<div id="devicemodal">     <div class="modal-header">         <div class="divbar" >             <div class="{{device.status}}"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div>             <div class="title">                 <h3>{{device.id}}</h3><br />              </div>             <div class="{{device.status}}text"><b>status: {{device.status}}</b> - {{device.action}}</div>         </div>          <div class="divbar">             <table>                 <tr><td class="datalabel">location: </td><td class="datacontent">{{device.location}}</td></tr>                 <tr><td class="datalabel">running time: </td><td class="datacontent">3 days</td></tr>                 <tr><td class="datalabel">number of starts: </td><td class="datacontent">60</td></tr>             </table>         </div>         <div class="divbar devicestatistics">             <canvas id="mychart" width="400" height="200"></canvas>         </div>     </div> </div> 

and here's modal controller built angular:

app.controller('modalcontroller', function ($scope, $modal) {      $scope.open = function (device) {         $scope.device = device;         var modalinstance = $modal.open({             templateurl: 'add_modal.html',             windowclass: 'app-modal-window',             scope: $scope         });          console.log('modal opened');          modalinstance.result.then(function () {              console.log('you can check user selections here');          }, function () {              console.log('modal dismissed at: ' + new date());          });      }; }); 

is possible me add chart , data in modal controller? or using directive maybe? graphs displaying data that's queried database when user selects item opens modal window.

i've been looking @ using javascript , jquery add chart , data, require element available on page @ time of execution , that's not case here. i've tried adding javascript templateurl doesn't work either. also, i'd imagine should able angular way, can suggest how might possible?

with answer assume modal open correctly.

we need have 2 controllers:

1. hold $modal service , control on opening modal (we'll use rename)

app.controller('myctrl', function ($scope, $modal) {      $scope.open = function (device) {          $scope.device = device;          var modalinstance = $modal.open({              templateurl: 'add_modal.html',              controller: 'myctrl'              windowclass: 'app-modal-window',          });            modalinstance.result.then(function () {              console.log('you can check user selections here');          }, function () {              console.log('modal dismissed at: ' + new date());          });        };  });

2. a controller control's modal dom when opens

app.controller('modalctrl', function($scope) {                $scope.mydata = [/*your data array*/];        $scope.mylabels = [/*your labels array*/];                });

and canvas whitin modal defined using $scope's vars

<canvas class="chart chart-line" data="mydata" labels="mylabels"></canvas> 

p.s - please pay attention 'open' modal declare controller it