directivas.js

angular.module("question_approval.directives")
  .directive('questionFormModal', function() {
    return {
      restrict: "E",
      replace: true,
      templateUrl: 'question_approval/question_form_modal.html'

    }
  })
  .directive('contributorDashboardContainer', function() {
    return {
      restrict: "E",
      replace: true,
      scope: {
//        questions: '='
      },
      templateUrl: 'question_approval/contributor_dashboard_container.html'
    }
  })
  .directive('questionContainer', function() {
    return {
      restrict: "E",
      replace: true,
      scope: {
//          questions: '=',
        jamon: '@'
      },
      templateUrl: 'question_approval/question_container.html'

    }
  })
  .directive('questionApprovalPreview', function() {
     return {
       restrict: "E",
       replace: true,
       templateUrl: 'question_approval/question_approval_preview.html'
     }
  })
  .directive('questionForm', function() {
     return {
       restrict: "E",
       replace: true,
       templateUrl: 'question_approval/question_form.html'
     }
  })
  .directive('questionFeedback', function() {
     return {
       restrict: "E",
       replace: true,
       templateUrl: 'question_approval/question_feedback.html'
     }
  });

question_approval_preview.html

<div ng-controller="ContributorDashboardController as topCtrl" class="panel-group">
<!--<div class="panel-group">-->
    <div ng-repeat="item in topCtrl.my_questions.questions">
    <!--<div >-->
        <div data-toggle="modal" data-target=".question-modal" class="panel panel-default">
            <div class="panel-heading">
                <a>
                    <h4 class="panel-title">
                        {{ item.name }} #1 (view more)
                    </h4>
                </a>
            </div>
        </div>
        <!-- last message -->
        <div class="message-item">
            <div class="message-inner">
                <div class="message-head clearfix">
                    <div class="avatar pull-left"> <a href="#"><img class="author-avatar" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a>
                    </div>
                    <div class="user-detail">
                        <h5 class="message-author">Jordan {{ jamon }}</h5>
                        <div class="post-meta">
                            <div class="message-meta-data"> <span class="message-meta-data-date">Jan 21</span>
                                <span class="message-meta-data-role">Administrator</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-content">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</div>
            </div>
        </div>
    </div>
</div>

question_feedback.html

<div id="modal-question-feedback" class="modal-tab-content tab-pane" >
    <form ng-submit="form.submitMessage()">
        <!-- enter message -->
        <div class="input-group">
            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..."/>
                                    <span class="input-group-btn">
                                        <input type="submit" class="btn btn-primary btn-sm" id="btn-chat" value="Send Message"/>
                                    </span>
        </div>
    </form>
    <!-- begin timeline -->
    <ul class="timeline">
        <!-- contributor message -->
        <li>
            <div class="timeline-badge">
                <img class="img-circle author-avatar" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title"><b>Me</b></h4>
                    <!-- datetime message-->
                    <p>
                        <small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago.
                        </small>
                    </p>
                </div>
                <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis
                        porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio,
                        in elementis mé pra quem é amistosis quis leo.</p>
                </div>
            </div>
        </li>
        <!-- admin message-->
        <li class="timeline-inverted">
            <div class="timeline-badge">
                <img class="img-circle author-avatar" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title"><b>Jordan</b></h4>
                </div>
                <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis
                        porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio,
                        in elementis mé pra quem é amistosis quis leo..</p>
                </div>
            </div>
        </li>
    </ul>
</div>

question_form.html

<div id="modal-question-form" class="modal-tab-content tab-pane" >
    <form ng-submit="form.submitQuestion()">
        <div class="row">
            <div class="col-md-6">
                <!-- question textarea -->
                <div class="form-group">
                    <label for="name">Question: {{ form.data.question.text }}</label>
                    <textarea ng-model="form.data.question.text" name="question"
                              class="form-control" rows="2" cols="25" required="required"
                              placeholder="Enter Question"></textarea>
                </div>
                <!-- background text -->
                <div class="form-group">
                    <label for="name">Background: {{ form.data.question.background }}</label>
                    <textarea ng-model="form.data.question.background" name="background"
                              class="form-control" rows="2" cols="25" required="required"
                              placeholder="Enter Background"></textarea>
                </div>
                <!-- video link-->
                <div class="form-group">
                    <label for="name">Video Link: {{ form.data.question.video_link }}</label>
                    <input ng-model="form.data.question.video_link" type="text" class="form-control"
                           id="name" placeholder="Enter Link" required="required"/>
                </div>
                <!-- references -->
                <div class="form-group form-group-options">
                    <label for="references">References: {{ form.data.references.text }}</label>
                    <div class="input-group input-group-option">
                        <input ng-model="form.data.references.text" type="text" name="references[]"
                               class="form-control" placeholder="Add Reference">
                                    <span class="input-group-addon input-group-addon-remove">
                                    <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                    </div>
                </div>
                <!-- upload image -->
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                         style="width: 110px; height: 60px;"></div>
                    <div>
                                    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span
                                            class="fileinput-exists">Change</span><input type="file" name="..."></span>
                        <a href="#" class="btn btn-default fileinput-exists"
                           data-dismiss="fileinput">Remove</a>
                    </div>
                </div>
            </div>
            <!-- right side -->
            <div class="col-md-6">
                <!-- select banks -->
                <div class="form-group bank-multiple-selects">
                    <label for="banks">Select Bank(s): {{ form.data.banks.selected }}</label>
                    <!-- <label ng-bind="form.selectedBankId" for="banks">Select Bank(s): </label> -->
                    <div class="input-group bank-multiple-select">
                        <select ng-model="form.data.banks.selected"
                                ng-options="b.id as b.option for b in form.BankOptions"
                                class="form-control"></select>
                        <!-- <select ng-model="form.selectedBank" ng-options="b.id as b.option for b in form.BankOptions" class="form-control"> -->
                        <!-- <select ng-model="form.selectedBank" ng-options="b.option for b in form.BankOptions" class="form-control"></select> -->
                    </div>
                </div>
                <!-- select subjects -->
                <div class="form-group bank-multiple-selects">
                    <label for="banks">Select Subject(s): {{ form.data.subjects.selected }}</label>
                    <div class="input-group bank-multiple-select">
                        <select ng-model="form.data.subjects.selected"
                                ng-options="b.id as b.option for b in form.SubjectOptions"
                                class="form-control"></select>
                    </div>
                </div>
                <!-- add answers -->
                <!-- add answers -->
                <div class="form-group form-group-options">
                    <label for="answers">Answers {{ form.data.answer.text }}</label>
                    <div class="input-group input-group-option">
                                    <span class="input-group-addon">
                                    <input ng-model="form.data.answers.correct" type="checkbox">
                                    </span>
                        <input ng-model="form.data.answers.text" type="text" name="answers[]" class="form-control" placeholder="Add Answer">
                                    <span class="input-group-addon input-group-addon-remove">
                                    <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                    </div>
                </div>
                <!-- Explanation textarea -->
                <div class="form-group">
                    <label for="name">Explanation {{ form.data.explanation.text }}</label>
                    <textarea ng-model="form.data.explanation.text" name="message" id="message"
                              class="form-control" rows="4" cols="25" required="required"
                              placeholder="Enter Explanation"></textarea>
                </div>
            </div>
            <textarea class="form-control" rows="10" cols="80">{{ form.data }}</textarea>
        </div>
        <input type="button" class="btn btn-default" data-dismiss="modal" value="Close"/>
        <input type="button" class="btn btn-primary" value="Save Changes"/>
        <input type="submit" class="btn btn-success" value="Send Question" ng-disabled="form.$invalid">
    </form>
</div>

question_form_controller.js

angular.module('question_approval.controllers')
    .controller('QuestionFormController', [function () {
        var self = this;

        // self.JsonData = "jamon";

        self.BankOptions = [
            {id: 1, option: "bank 1"},
            {id: 2, option: "bank 2"},
            {id: 3, option: "bank 3"},
            {id: 4, option: "bank 4"},
            {id: 5, option: "bank 5"},
            {id: 6, option: "bank 6"}
        ];

        // self.selectedBankId = 1;
        // self.selectedBank = self.BankOptions[1];

        self.SubjectOptions = [
            {id: 1, option: "subject 1", bank: 1},
            {id: 2, option: "subject 2", bank: 1},
            {id: 3, option: "subject 3", bank: 1},
            {id: 4, option: "subject 4", bank: 1},
            {id: 5, option: "subject 452", bank: 2},
            {id: 6, option: "subject 13643265", bank: 2},
            {id: 7, option: "subject 7643", bank: 2},
            {id: 8, option: "subject 7543", bank: 2},
            {id: 9, option: "subject 754", bank: 3},
            {id: 10, option: "subject 7485", bank: 3},
            {id: 11, option: "subject 126423", bank: 3},
            {id: 12, option: "subject 623653", bank: 3},
            {id: 13, option: "subject 152", bank: 4},
            {id: 14, option: "subject gds", bank: 4},
            {id: 15, option: "subject gdf", bank: 4},
            {id: 16, option: "subject gdf", bank: 4}
        ];

        // self.selectedSubjectId = 1;
        // self.selectedSubjectBank = self.SubjectOptions[1];

        self.Items = [
            {id: 1, question: 'isDraft Question?', isDraft: true},
            {id: 2, question: 'isDraft Question?', isDraft: true},
            {id: 3, question: 'isDraft Question?', isDraft: true},
            {id: 1, question: 'isDraft Question?', isDraft: true},
            {id: 2, question: 'Second Question?', isInReview: true},
            {id: 3, question: 'Third Question?', isInReview: true},
            {id: 1, question: 'First Question?', isInReview: true},
            {id: 2, question: 'Second Question?', isInReview: true},
            {id: 3, question: 'Third Question?', isInReview: true},
            {id: 1, question: 'First Question?', isInReview: true},
            {id: 2, question: 'Second Question?', isApproved: true},
            {id: 3, question: 'Third Question?', isApproved: true}
        ];

        self.ChangeModalTabTo = function(towards)
        {
            var _vars = {
                duration: 300,
                active_class: "active",
                selected_tab: towards
            };

            function _GetContentTabsArray() {
                return $(".modal-tab-content");
            }

            function _ActiveSelectedContentTab() {

                var elements = _GetContentTabsArray();
                var len = elements.length;

                for (var i = 0; i < len; i++)
                {
                    var idString =  elements[i].id;

                    if(idString.indexOf(_vars.selected_tab) !== -1)
                    {
                        $('#' + idString).fadeIn(_vars.duration);
                        $('#' + idString).addClass(_vars.active_class);
                        break;
                    }
                }
            }

            function _CloseCurrentContent () {

                $.each(_GetContentTabsArray(), function(i, el)
                {
                    var $el = $(el);
                    if($el.hasClass(_vars.active_class))
                    {
                        $el.removeClass(_vars.active_class);
                        $el.hide();
                    }
                });
            }

            _CloseCurrentContent();
            _ActiveSelectedContentTab();
        };

        self.ChangeTabTo = function (towards) {

            var _vars = {
                duration: 300,
                active_class: "active",
                selected_tab: towards
            };

            function _GetContentTabsArray() {
                return $(".jamon-content");
            }

            function _ActiveSelectedContentTab() {

                var elements = _GetContentTabsArray();
                var len = elements.length;

                for (var i = 0; i < len; i++)
                {
                    var idString =  elements[i].id;

                    if(idString.indexOf(_vars.selected_tab) !== -1)
                    {
                        $('#' + idString).fadeIn(_vars.duration);
                        $('#' + idString).addClass(_vars.active_class);
                        break;
                    }
                }
            }

            function _CloseCurrentContent () {

                $.each(_GetContentTabsArray(), function(i, el)
                {
                    var $el = $(el);
                    if($el.hasClass(_vars.active_class))
                    {
                        $el.removeClass(_vars.active_class);
                        $el.hide();
                    }
                });
            }

            _CloseCurrentContent();
            _ActiveSelectedContentTab();
        };

        self.submitQuestion = function () {
            console.log(angular.toJson(self.data));
        };

        self.submitMessage = function () {
            alert("submit message");
        };
        // self.getBankOptions;
        // self.getSubjectOptions;
        // self.getDraftQuestions;
        // self.deleteDraftQuestion;
        // self.updateDraftQuestion;
        // self.getInReviewQuestions;
        // self.getApprovedQuestions;
        // self.createQuestion;
        // self.sendQuestion;
        // self.sendMessage;
    }]);

question_form_modal.html

<div class="question-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="Question Data" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div ng-controller="QuestionFormController as form" class="modal-content">
            <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
            <br>
            <ul class="nav nav-tabs">
                <li class="active"><a ng-click="form.ChangeModalTabTo('form')" data-toggle="tab">Question Content</a></li>
                <li class=""><a ng-click="form.ChangeModalTabTo('feedback')" data-toggle="tab">Feedback</a></li>
            </ul>
            <!-- modal body -->
            <div class="modal-body">
                <div class="tab-content">
                    <!-- modal tab question content-->
                    <question-form class="active"></question-form>
                    <!-- modal tab feedback-->
                    <question-feedback></question-feedback>
                </div>
            </div>`
        </div>
    </div>
</div>

questions_container.html

<div id="questions-tab-{{ jamon }}" class="jamon-content tab-pane">
    <question-approval-preview></question-approval-preview>
</div>