No graphic displayed using ng-include in view

Question

I am using angularjs and ng-include in in the view. I need to create a graphic using dygraph. I have 5 templates that show or hide when I click one button. When I click the button ng-include load a template. In this template, I have a div with Id where I want to show the graphic.

The problem is that this id doesn't exist in DOM when I click. If I click again, it shows the graphic without any problem because the Id exist.

My code:

View:

<button class="btn" ng-click="exploreLineChart()">Line chart</button>
<div ng-include="currentTemplate.url"></div>

Template:

<div id="linechart"></div>

Controller:

$scope.templates = [
        {url: 'views/explore-dataset/summary.html', title: 'Summary'},
        {url: 'views/explore-dataset/line-chart.html', title: 'Line Chart'},
        {url: 'views/explore-dataset/bar-chart.html', title: 'Bar Chart'},
        {url: 'views/explore-dataset/scatter.html', title: 'Scatter Plot'},
        {url: 'views/explore-dataset/pie-chart.html', title: 'Pie Chart'},
        {url: 'views/explore-dataset/correlation.html', title: 'Correlation'}
    ];

$scope.exploreLineChart = function ()
    {
        $scope.currentTemplate = $scope.templates[1];
        linechart = new Dygraph(document.getElementById("linechart"),
            $scope.csvContent,
            {
                height: 320
            });
    }

Answer 1

I advice you to create a directive to manage better the scope and graph state, for example:

Directive:

angular.module('tAngularApp').directive('ngGraphic', function() {
    return {
        restrict: 'A',
        template: '<button class="btn" ng-click="exploreLineChart(0)">Summary</button><button class="btn" ng-click="exploreLineChart(1)">Line chart</button><div id="linechart"> </div>',
        link: function($scope,element, attrs, ctrl) {

            $scope.templates = [
                {url: 'views/explore-dataset/summary.html', title: 'Summary'},
                {url: 'views/explore-dataset/line-chart.html', title: 'Line Chart'},
                {url: 'views/explore-dataset/bar-chart.html', title: 'Bar Chart'},
                {url: 'views/explore-dataset/scatter.html', title: 'Scatter Plot'},
                {url: 'views/explore-dataset/pie-chart.html', title: 'Pie Chart'},
                {url: 'views/explore-dataset/correlation.html', title: 'Correlation'}
            ];

            $scope.exploreLineChart = function (index) {
              $('#linechart').text('displaying : ' + $scope.templates[index].title + ' template');
              // TODO: Create the Graph
            }
        }
    };
});

Html:

<div ng-graphic=""></div>