JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div ng-app="myapp" ng-controller="myController">
    <div ng-repeat="make in makeList">
      <model-list-directive make="{{make}}" />
    </div>
</div>

JavaScript

var app = angular.module('myapp', []);

app.factory('myService', function () {
    var makeList = ['ford', 'bmw', 'toyota'],
        modelList = {
            ford: [
                {modelName: 'mustang'},
                {modelName: 'festiva'},
                {modelName: 'F150'}
            ],
            bmw: [
                {modelName: '128i'},
                {modelName: '330i'},
                {modelName: 'M6'}
            ],
            toyota: [
                {modelName: 'tacoma'},
                {modelName: 'camry'},
                {modelName: 'tercel'}
            ]
        };
    
    function getModelList(make){
        return modelList[make];
    }
    
    return {
        getModelList: getModelList,
        makeList: makeList
    };
});

app.controller("myController",function($scope, myService) {
    $scope.makeList = myService.makeList;
    
    $scope.getModelList = function(make) {
        return myService.getModelList(make);
     };
});

app.directive("modelListDirective",function(myService) {
    return {
        restrict:'E',
        scope: {
            make: '@'
        },
        link: function (scope, element, attrs) {
            scope.modelList = myService.getModelList(scope.make);
        },
        template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
        controller: ['$scope', function ($scope) {
        }]
    };
});