Display value in a button by linking two modals
<p>I have two modals each of it having different content. My first modal has a button which opens the second one. The second modal has Key Id's which should be displayed in the button of the first modal upon selection. I'm able to display the value in my second modal by just using label(Used this just to check if my selected is working). I'm not able to display the selected value in the button of my first modal. Any idea how it can be done?</p>

<p>Here's the code which I used,</p>

<p>In the template of the the first Modal,</p>

<pre><code>&lt;button class="btn btn-default btn-lg" ng-click="Modal()"  ng-model="cp.se"&gt;&lt;/button&gt;
</code></pre>

<p>Function to Open Modal and link to Controller,</p>

<pre><code>$scope.Modal = function() {
            // function to open modal and link to Modal Controller
                var modalInstance = $modal.open({
                backdrop: 'static',
                templateUrl: '{% url 'critical_process' %}',
                controller: 'Controller',
            });


        modalInstance.result.then(function (msg) {
                $log.info('Modal success');
                //console.log(msg);
            });
        };
        // End:function to open modal and link to Modal Controller
</code></pre>

<p>In the controller,</p>

<pre><code>{{ngapp}}.controller(
        "Controller",
        function($scope, $http, $modalInstance){
        $scope.selected=[];
        $scope.items=[  { value:'Impact to Safety, regulatory compliance, or /n environment', key:10, color:'red'},
                        { value:'Reliability Impact',key:9, color:'brown'}];

});
</code></pre>

<p>In the template of the second modal, </p>

<pre><code>&lt;div class="well form-group" &gt;
            &lt;table class="table"&gt;

            &lt;tr ng-repeat="item in items" ng-click="selected.item= item"&gt;
                    &lt;td ng-style="{ 'background-color': item.color }"&gt;{{item.key}}&lt;/td&gt;
                    &lt;td&gt; {{item.value}}                     &lt;/td&gt;
             &lt;/tr&gt;
            &lt;/table&gt;
            &lt;label&gt;{{selected.item}}&lt;/label&gt;
        {% endverbatim %}
&lt;/div&gt;
       &lt;/div&gt;
</code></pre>

<p>In the template of second modal</p>

<pre><code>&lt;div class="well form-group" &gt;
    &lt;table class="table"&gt;
        &lt;!-- bind event handler on row click and pass the item to handler function --&gt;
        &lt;tr ng-repeat="item in items" ng-click="ok(item)"&gt;
            &lt;td ng-style="{ 'background-color': item.color }"&gt;{{item.key}}&lt;/td&gt;
            &lt;td&gt; {{item.value}}                     &lt;/td&gt;
         &lt;/tr&gt;
     &lt;/table&gt;
     &lt;label&gt;{{selected}}&lt;/label&gt;
     {% endverbatim %}
&lt;/div&gt;
</code></pre>

<p>In the controller for second modal</p>

<pre><code>{{ngapp}}.controller("Controller", function($scope, $http, $modalInstance){
     $scope.selected=[];
     $scope.items = [  
        { value:'Impact to Safety, regulatory compliance, or /n environment', key:10, color:'red'},
       { value:'Reliability Impact',key:9, color:'brown'}
     ];

     $scope.ok = function(item) {
          &lt;!-- Pass the selected value to first modal --&gt;
          &lt;!-- Closing the modal resolves the promise --&gt;
          $scope.selected = item;
          $modalInstance.close(item);
     }
});
</code></pre>

<p>And in your first modal function</p>

<pre><code>    $scope.Modal = function() {
        // function to open modal and link to Modal Controller
            var modalInstance = $modal.open({
            backdrop: 'static',
            templateUrl: '{% url 'critical_process' %}',
            controller: 'Controller',
        });

        // On promise resolved passed callback function gets executed
        modalInstance.result.then(function (selectedItem) {
            // Assign selected item value to your modal
            cp.se = selectedItem.value;
        });
    };
</code></pre>

<p>Html</p>

<pre><code>&lt;button class="btn btn-default btn-lg" ng-click="Modal()"&gt;{{cp.se}}&lt;/button&gt;
</code></pre>

python html angularjs django