javascript - Dynamic HTML partial based on REST response -

i have application building using angular js front end , rest-based api end feeding mysql database. there rest calls made front end end populate or retrieve data in database. want add drop down selection box angular js front end home page. want selection trigger rest call database, retrieve specific value , have value become part of dynamically loaded html partial.

as example, drop down select model of car (toyota corolla, honda accord, etc.) when select model, controller make rest call appropriate table(s) rest of information car (mpg, size, weight, etc.) once did this, load partial html on page template html file dynamic content. page loaded /#/carinfo?toyotacorolla. template partial html file load , tables on template populate response rest call. have single template page, call new version of page based on selected.

i thinking in head , not have application code me. question not actual code solution, either write pseudo code or point me demo/example online similar this...if possible. doing searches on own, may searching wrong terminology accomplished. pointers or on appreciated.

update: home, here snippet of code having issues with.

<ul class="nav navbar-nav">     <li><a href="#/home" class="mdi-action-home"></a></li>     <li class="dropdown">         <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">             select car...             <b class="caret"></b></a>         <ul class="dropdown-menu">             <li ng-model="selectedcar.value" ng-repeat="x.car x in cars"                 ng-change="selectedcarchanged()"></li>         </ul>     </li> </ul> 

that not populating correctly. have same ng code <select> implementation using ng-options instead of ng-repeat. hoping simple transition, css version using lists not working.

please find code snippet below. hope helpful

car-list.html

<div ng-controller="carlistcontroller">     <select ng-model="selectedcar" ng-change="onselectcar(selectedcar)">         <option ng-repeat="car in cars">{{car}}</option>     </select> </div> 

carlistcontroller.js

app.controller('carlistcontroller', function($scope, $location) {     $scope.carlist = ['honda', 'toyota', 'suzuki', 'hyundai'];     $scope.onselectcar = function(car) {         $location.path('#/carinfo').search({carinfo: car});     } }); 

carinfo.html

<div class="cardetails">     <span>car name: {{car.name}}</span>     <span>car model: {{car.model}}</span>     <span>car year: {{car.year}}</span>     <span>car size: {{car.size}}</span> </div> 

carinfodetailscontroller.js

app.controller('carinfocontroller', function($scope, $location, $http) {     $scope.car = {};     $scope.init= function() {         $http.get('url/' + $location.search('carinfo'), function(response) {               $scope.car = response;         });     };      $scope.init(); }); 

appconfig.js

app.config(function($routeprovider){      $routeprovider.when('/carinfo'{          templateurl: "carinfo.html",          controller: "carinfocontroller"      }); });