angularjs datatables are not responsive

I'm working with angular datatables, and I have to states : #/app/configurations/formations and #/app/configurations/filieres, so when I switch between these two states I have some issues related to presentation as following :

the first time when I access #/app/configurations/formations this is how it looks :

but when I access some other state for example : #/app/configurations/filieres my datatable doesn't expand in the whole page :

and this behavior remains for all my datatables in my application, so I have always to refresh the page to make the datatable expand in the whole page.

this is how I build all my datatables :

var vm = this;

    vm.dtOptions = DTOptionsBuilder.fromSource("http://localhost:8080/diplomes")
      .withPaginationType('full_numbers')
      .withBootstrap()
      // Active Responsive plugin
      .withOption('responsive', false)
      .withOption('initComplete', function(settings) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element('#' + settings.sTableId).contents())($scope);
      });
    vm.dtColumns = [
       DTColumnBuilder.newColumn('codeDiplome').withTitle('ID Diplome'), 
      DTColumnBuilder.newColumn('nom').withTitle('NOM Diplome'), 
      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
        .renderWith(function(data, type, full, meta) {
          if (true) {
              return '<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openEditModal('+data.codeDiplome+')"><i class="fa fa-edit"></i> <span>'+$scope.update+'</span></button>&nbsp;'
              + '<button class="btn btn-danger btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openDeleteModal('+data.codeDiplome+')"><i class="fa fa-trash"></i> <span>'+$scope.delete+'</span></button>';
          } else {
            return '';
          }

        })
    ];