AngularJs returning data for multiple dynamic dropdowns

You should use $httpProvider.useApplyAsync and pass in true.

From the documentation:

Configure $http service to combine processing of multiple http responses received at around the same time via $rootScope.$applyAsync. This can result in significant performance improvement for bigger applications that make many HTTP requests concurrently (common during application bootstrap).

This means that if true, when requests are loaded, they will schedule a deferred "apply" on the next tick, giving time for subsequent requests in a roughly ~10ms window to load and share the same digest cycle.

In short, you can avoid unnecessary digest cycles which can make a hell of a difference.

Simply pass $httpProvider into your run function and modify the provider like so:

angular.module('MyApp', [])

.run(function($httpProvider){

    $httpProvider.useApplyAsync(true);

});

You can use $q service for such a scenario like this:

var CustomSearchController = function ($scope, $q, $log, $http) {
    var listPromise = $http.get('/Account/GetLists');
    var genderPromise = $http.get('/Account/GetGenders');

    var ethnicCitiesPromise = $http.get('/Account/GetEthnicities')

    var regionsPromise = $http.get('/Account/GetRegions')

    var academicPromise = $http.get('/Account/GetAcademics');

    $q.all([genderPromise, ethnicCitiesPromise, regionsPromise, academicPromise])
        .then(function (responses) {
            // Here you have all the resolved datas
            // responses[0]
            // responses[1]
            // responses[2]
            // responses[3]
        }).catch(function (error) {
            $log.error(error);
            throw error;
        })

}

However I prefer to call a function of ng-change of each dropdown to retrieve data in a cascade style.

Try like this: your Controller (main view):

ViewBag.regionDetailsJson = new JavaScriptSerializer().Serialize(regionDetails );

In your view:

var regionDetailsJson = $.parseJSON('@Html.JsonRaw((string)ViewBag.regionDetailsJson )');

And than in your angular controller:

$scope.regionDetailsJson = regionDetailsJson;

Using promises as suggested by HFA is a more Angular approach, but it will still result in 5 calls to the server; so will not really help improve your page load performance - i.e you will still be waiting for the 5 promises to resolve before you get your data.

One thing you could try is to formulate this lists when the page served by your MVC Account action is loaded and save these to the page model. You can then access this client side, in a script block, assigning them to a (global)variable, which you can then access in Angular.

I've not tested this but have you this approach in the past. As a guide the steps you would need to follow are:

In your AccountController

public ActionResulst Index() {
    var model = new AccountModel {
     Lists = GetLists(),
     Ethnicities = GetLists()
    }
  return View(model);
}

Then on your Razor Page

@model AccountModel
    <script>
        window.lists= "@(Model.Lists)";
        window.ethnicities = "@(Model.Ethnicities )";
    </script>

Then in your Angular

var CustomSearchController = function ($window) { 

var lists = $window.lists;
var ethnicities  = $window.ethnicities;
}

You may need to convert the results to JSON using JSON.Parse

There is nothing wrong with your approach. You are following the separation of concern, and single responsibility.

If you get the date from Model or ViewModel from ASP.Net MVC View, you cannot Unit Test the Angular Services easily.

Another approach is to use resolve. It basically load the data first before a route executes. FYI: It will not improve the overall loading time, although you can display page loading icon.

Demo for Angular 1.5 Route Resolve at Plunker

(function () {

    angular
      .module("app", ['ngRoute'])
      .config(function($routeProvider){
        $routeProvider
          .when("/home", {
              template: `<main 
                promise-followers="$resolve.promiseFollowers"></main>`,
              resolve: {promiseFollowers: function ($http) {
                    return $http.get("https://api.github.com/users/octocat/followers")
                      .then(function(result) { 
                        return result.data;
                      }, function(result) { 
                        console.log(result);
                      });
                }
              },
          })
          .otherwise({ redirectTo: "/home" } );
      })
      .component("main", {
        template: `<h3>Demo Angular 1.5 Resolver</h3>
        
        <p>Promise Data from Resolve : 
          <select ng-model="$ctrl.selected" 
            ng-options="option.id as option.login for option in $ctrl.promiseFollowers"></select>
        </p>        
        
        <h4>Regular Selector Selected: {{$ctrl.selected}}</h4>`, 
        bindings: {
          promiseFollowers: '='
        },
        
        controller: function(){
          
        }
      });
      
})();

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.7/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <ng-view></ng-view>
  </body>

</html>