JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="ModalDemoCtrl">
<!-- Assume that the below 3 text fields are dynamically generated and I dont have access to the id untill the time page is loadaed -->
<div class="form-horizantal">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="txt1" placeholder="txt1" ng-model="txt1">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="txt2" placeholder="txt2" ng-model="txt2">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="txt3" placeholder="txt3" ng-model="txt3">
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" ng-click="selectConn()">Set Values using Modal</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
txt1 :
</div>
<div class="col-sm-6">
{{txt1}}
</div>
</div>
<div class="row">
<div class="col-sm-6">
txt2 :
</div>
<div class="col-sm-6">
{{txt2}}
</div>
</div>
<div class="row">
<div class="col-sm-6">
txt3 :
</div>
...