ChartJS not showing when div is hidden

I have a tabbed angular app. These tabs show and hide the content of the div using the ng-show directive. Each div contains inside some canvas showing ChartJS charts.

When I scroll to another tab, I find that my charts are not showing until I repackage the page or make another request to my function to reload the charts requesting my server, even though all the data has already been loaded $ promise.

Here's my charts displaying correctly ...

But when I change the tab without a forced reload (the data is already loaded) this is what happens ...

This is my HTML

<section style="overflow-y:hidden" class="bg-white scroller-v" ng-init="AskForToggle()">
<div class="tab-nav clearfix">
    <ul class="side-padding-3x">
        <li data-ng-class="activeSubMenu('Actividades')">
            <a class="size-12x" data-ng-click="Show('Actividades')">Actividades</a>
        </li>
        <li data-ng-class="activeSubMenu('Paginas')">
            <a class="size-12x" data-ng-click="Show('Paginas')">Compromiso</a>
        </li>
        <li data-ng-class="activeSubMenu('Videos')">
            <a class="size-12x" data-ng-click="Show('Videos')">Videos</a>
        </li>
    </ul>
</div>

<div class="col col-unpadded col-lg-2 col-md-3 col-sm-12 col-xs-12 side-menu">
    <header>Fechas</header>
    <ul class="list">
        <li><input type="date" ng-model="analyticsDateDesde" ng-change="ValidateDateDesde(analyticsDateDesde)" /></li>
        <li><input type="date" ng-model="analyticsDateHasta" ng-change="ValidateDateHasta(analyticsDateHasta)" /></li>
        <li><input type="button" ng-click="UpdateAnalytics()" value="Actualizar Fechas" style="color:white; background-color:#3c8dbc;border:#3c8dbc" /></li>
    </ul>
    <header>Alumnos</header>
    <ul class="list">
        <li data-ng-repeat="user in users">
            <a data-ng-class="activeNav(user)" data-ng-click="$parent.selectedUser = user">{{user.name}} {{user.lastName}}</a>
        </li>
    </ul>
</div>

<div id="divActividades" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

<div id="divPaginas" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

<div id="divVideos" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

      

        
        
        
      

    

And this angular controller of mine

appFlipped.controller("ClassTraceability", ["$rootScope", "$scope", "Courseware", "$timeout", "$window", function (n, t, i, to, window) {
    t.GetTypeClass = function (traza) {
        if (traza.tipoAccion == 'Video')
            return 'cd-timeline-img cd-movie';
        else if (traza.tipoAccion == 'Problem')
            return 'cd-timeline-img cd-picture';
        else
            return 'cd-timeline-img cd-location';
    }
    n.menuData = utils.courseMenu();

    t.activeNav = function (n) {
        return {
            active: t.selectedUser && t.selectedUser.id == n.id
        }
    }
    t.users = [];
    t.selectedUser = null;
    t.timeOnPlatform = null;
    t.timeOnPlatformPerDayComparison = null;
    t.timeOnPlatformPerDay = null;


    i.init(n.routeData.classId).then(function () {
        i.users.queryClass().$promise.then(function (n) {
            t.users = n;
            n.length && (t.selectedUser = n[0]);
        })
    });

    t.$watch("selectedUser", function (n) {
        n != null && t.loadTraceability();
    });

    t.UpdateAnalytics = function () {
        t.loadTraceability();
    }


    t.loadTraceability = function () {
        if (t.selectedUser != null) {
            var p = {
                userId: t.selectedUser.id,
                courseURL: n.rutaParaAnalytics,
                fechaDesde: t.analyticsDateDesde,
                fechaHasta: t.analyticsDateHasta
            };
            i.traceability.get(p).$promise.then(function (n) {
                t.Traceability = n.traceability;
                t.showTimeline = t.Traceability.length > 0 ? true : false;

                t.labelsTimeOnPlatform = n.timeOnPlatform[0];
                t.dataTimeOnPlatform = n.timeOnPlatform[1];
                t.loadPageActivity();

                t.labelsTimeOnPlatformPerDay = n.timeOnPlatformPerDay[0];
                t.dataTimeOnPlatformPerDay = n.timeOnPlatformPerDay[1];
                t.loadPageActivityPerDay();

                t.labelsTimeOnPlatformPerDayComparison = (n.timeOnPlatformPerDayComparison[0])[0];
                t.dataTimeOnPlatformPerDayComparisonClass = (n.timeOnPlatformPerDayComparison[0])[1];
                t.dataTimeOnPlatformPerDayComparisonStudent = (n.timeOnPlatformPerDayComparison[1])[1];
                t.loadPageActivityComparison();

                t.totalVideoCount = n.genericVideoAnalytics[0];
                t.userTotalVideoCount = n.genericVideoAnalytics[1];
                t.totalMinutesVideosCount = n.genericVideoAnalytics[2];
                t.usertotalMinutesVideosCount = n.genericVideoAnalytics[3];
                t.loadGenericVideoAnalytics();

                t.videoTimeLabels = n.videoTime[0];
                t.videoTimeData = n.videoTime[1];
                t.loadVideoTime();

                t.videoTimePerDayLabels = n.videoTimePerDay[0];
                t.videoTimePerDayData = n.videoTimePerDay[1];
                t.loadVideoTimePerDay();

                t.videoTimePerDayComparisonLabels = (n.videoTimePerDayComparison[0])[0];
                t.videoTimePerDayComparisonClass = (n.videoTimePerDayComparison[0])[1];
                t.videoTimePerDayComparisonUser = (n.videoTimePerDayComparison[1])[1];
                t.loadVideoTimePerDayComparison();
            });
        }
    };

    t.PaginaVisible = 'Actividades';
    t.activeSubMenu = function (pagina) {
        if (t.PaginaVisible == pagina)
            return 'active';
        else
            return '';
    }

    t.Show = function (pagina) {
        if (pagina == 'Actividades') {
            angular.element("#divActividades")[0].style.display = 'block';
            angular.element("#divPaginas")[0].style.display = 'none';
            angular.element("#divVideos")[0].style.display = 'none';
            t.PaginaVisible = 'Actividades';
        }
        if (pagina == 'Paginas') {
            angular.element("#divActividades")[0].style.display = 'none';
            angular.element("#divPaginas")[0].style.display = 'block';
            angular.element("#divVideos")[0].style.display = 'none';
            t.PaginaVisible = 'Paginas';
        }
        if (pagina == 'Videos') {
            angular.element("#divActividades")[0].style.display = 'none';
            angular.element("#divPaginas")[0].style.display = 'none';
            angular.element("#divVideos")[0].style.display = 'block';
            t.PaginaVisible = 'Videos';
        }
    }
}]);

      

        
        
        
      

    

The most wired thing is that one of all charts is displayed! Does anyone face the same problem?

Hello