i have designed a main form with textbox and button(when button is clicked modal popup must open).inside modal popup there are two text boxes and a submit button.i am performing subtraction operation inside modal popup. after submit button is clicked inside modal popup,modal popup is closed and result must be shown in textbox which is on the main form and also a new row will be added automatically with a button and a textbox.the problem is when submit button is clicked inside popup, the result is showing same in main form textbox and also added row text box here is the code
var app = angular.module("myApp", []);
app.controller('myCntrl', function ($scope) {
$scope.rows = [
{
column1: 'first row',
column2: 'second column of first row',
column3: false
}
];
$scope.Addrow = function () {
alert("hi");
$scope.rows.push(
{
column1: 'row #' + $scope.rows.length,
column2: 'this is new',
column3: true
}
);
$scope.result = $scope.val - $scope.value;
}
});
//index.cs html
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div> <div ng-controller="myCntrl"> <br /> <table> <tr ng-repeat="row in rows"> <td> <input type="text" ng-model="result" /> </td> <td width="5%"></td> <td> <td> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> </td> </tr> </table> <br /> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <table> <tr> <td> <label> Value1</label> </td> <td> <input type="text" ng-model="v al"/> </td> <td></td> <td> <label> Value2 </label> </td> <td> <input type="text" ng-model="value"/> </td> </tr> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" ng-click="Addrow()" data-dismiss="modal">Submit</button> </div> </div> </div> </div> </div> </div> <script src="~/Scripts/ModalModule.js"></script>
//Layout.cs html
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <script src="~/Scripts/angular.min.js"></script>
@*<script src="~/Scripts/angular-route.min.js"></script>*@
@*for modal popup*@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="~/Content/Site.css" rel="stylesheet" /> 
