angular.module('app', [])

​

  .factory('Calc', function($timeout) {

    var getFields = function(callback) {

      $timeout(function() {

        callback([

          {name: "field1", select: [10, 20, 30, 40]},

          {name: "field2"},

          {name: "field3", textarea: true},

          {name: "field4", select: ["one", "two", "three", "four"]}

        ]);

      }, 5000);

    };

    return {

      getFields: getFields

    };

  })

​

  .controller('DemoController', function ($scope) {

    $scope.orders = {};

  })

​

  .directive('calcDrct', function ($compile, Calc) {

    return {

      restrict: 'A',

      link: function(scope, element) {

        Calc.getFields(function(calcFields) { 

          var html = "<form>";

          angular.forEach(calcFields, function(field){

            html += "<p>" + field.name + "</p>";

            if (field.select !== undefined) {

              html += "<select>";

              angular.forEach(field.select, function(selectdata) {

                html += "<option>" + selectdata + "</option>";

              }); 

              html += "</select>";

            } else if (field.textarea) {

              html += "<textarea></textarea>";

            } else {

              html += "<input></input>";

            } 

          });

          html += "</form>";

​

          element.append($compile(html)(scope));

        });

      }

    };

  });