AngularJS + Datatables + Dropdownlist

I'm using AngularJS to populate my datatable. What I want to know is how can I populate the datatable based on the dropdownlist

This is my dropdownlist

     Get Users with Role:
     <select id="ddlRole" data-ng-model="selectedRole" data-ng-change="populateDataTable()" data-ng-options=" for (k,v) in roles"></select>
     <input type="hidden" value="{{selectedRole}}" />

This is my angular code

$scope.roles = [
    {name: 'XXX' },
    {name: 'YYY' }
$scope.selectedRole = $scope.roles[0];

//onchange event
 $scope.populateDataTable = function () {
    $scope.selectedRole = $;
    RefreshDataTable(); //TODO

How can I change this to make an ajax call to retreive the data, populate the datatable based on the dropdownlist value and retain the value of dropdownlist as well.

I'm sure we can do this using JQuery but I dont want to mix these and make a mess. Is there any way I can acheive this using AngularJS?


Here is a simple data table directive:

    appModule.directive('dataTable', [function () {
    return function (scope, element, attrs) {

        // apply DataTable options, use defaults if none specified by user
        var options = {};
        if (attrs.myTable.length > 0) {
            options = scope.$eval(attrs.myTable);
        } else {
            options = {
                "bStateSave": true,
                "iCookieDuration": 2419200, /* 1 month */
                "bJQueryUI": true,
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bInfo": false,
                "bDestroy": true

        // Tell the dataTables plugin what columns to use
        // We can either derive them from the dom, or use setup from the controller           
        var explicitColumns = [];
        element.find('th').each(function (index, elem) {
        if (explicitColumns.length > 0) {
            options["aoColumns"] = explicitColumns;
        } else if (attrs.aoColumns) {
            options["aoColumns"] = scope.$eval(attrs.aoColumns);

        // aoColumnDefs is dataTables way of providing fine control over column config
        if (attrs.aoColumnDefs) {
            options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);

        if (attrs.fnRowCallback) {
            options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);

        // apply the plugin
        var dataTable = element.dataTable(options);

        // watch for any changes to our data, rebuild the DataTable
        scope.$watch(attrs.aaData, function (value) {
            var val = value || null;
            if (val) {

        if (attrs.useParentScope) {
            scope.$parent.dataTable = dataTable;
        } else {
            scope.dataTable = dataTable;

Then initialize it in your controller. Override fnServerData method, append your selected value (selected role) and filter data on server side.

    $scope.overrideOptions = {
            "bStateSave": true,
            "iDisplayLength": 8,
            "bProcessing": false,
            "bServerSide": true,
            "sAjaxSource": 'Data/Get',
            "bFilter": false,
            "bInfo": true,
            "bLengthChange": false,
            "sServerMethod": 'POST',        ,
            "fnServerData": function(sUrl, aoData, fnCallback, oSettings) {
                var data = {
                    dataTableRequest: aoData,
                    selectedDropDownValue: $scope.selectedRole

                $, data).success(function (json) {
                    if (json.sError) {
                        oSettings.oApi._fnLog(oSettings, 0, json.sError);

                    $(oSettings.oInstance).trigger('xhr', [oSettings, json]);

var columnDefs = [
                            "mData": "id",                            
                            "bSortable": false,
                            "bSearchable": false,                            
                            "aTargets": ['tb-id']
                            "mData": "data",
                            "aTargets": ['tb-data']                            

Refresh the datatable on select change.

$scope.populateDataTable = function () {         
     if ($scope.dataTable) {

Html markup:

<table  class="display m-t10px" data-table="overrideOptions" ao-column-defs="columnDefs">
              <th class="tb-id"></th>           
              <th class="tb-data></th>               

Hope above your code is in controller. Inject $http and make a $http get or post call

$scope.populateDataTable = function () {
     $scope.selectedRole = $;
      $http.get('api/controller', function(result){
        //response from the service call in result

Need Your Help

Resolve IP from No-IP DNS A

c# dns resolve dynamic-ip noip

I need to Resolve the IP from my No-IP Hostname, which I setup because I'm behind a Router and this Router doesn't have a static public IP. The hostname is setup as a DNS A record.

Parsing dirty HTML on iPhone

iphone html cocoa cocoa-touch parsing

I already searched a long time for a good solution, but I can't find anything that fits my needs...