Angular modal is not updating $scope in result - angularjs

Question

I'm trying to implement a modal window in Angular to prompt a user for an input, I've used almost the same code in a previous app and it worked, I really don't know what is going on here...
Here is the controller that opens the modal (in Coffee Script):
.controller('addStreamModal', [
'$scope', '$modal', '$log', '$http', '$rootScope'
($scope, $modal, $log, $http, $rootScope) ->
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: 'addStreamModalInstance'
resolve:
public_key: ->
"placeholder"
)
modalInstance.result.then ((result) ->
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
])
Now the modal instance controller:
.controller('addStreamModalInstance', [
'$scope', '$modalInstance', '$http', 'public_key'
($scope, $modalInstance, $http, public_key) ->
console.log(public_key)
$scope.public_key = public_key
$scope.ok = ->
console.log($scope.public_key)
$modalInstance.close $scope
return
$scope.cancel = ->
$modalInstance.dismiss "cancel"
return
return
])
And the HTML:
<div class="modal-header">
<h4>Please enter the private key for verification {{public_key}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" ng-model="public_key">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
So I click a button and the Modal opens with "placeholder" in the text box, I can also see this test bound to the modal title. As I endit text in the box, the title continues to update as expected due to binding, however when I click ok, it seems like the $scope.public_key reverts back to "placeholder". Trying to figure out why.

Answer 1

When you set the value in your addStreamModalInstance controller you are working within a different scope than addStreamModal. To update addStreamModal's scope with the value set in addStreamModalInstance you can return the selected value (you are doing this by returning $scope) and assign it in the .then invocation of your addStreamModal controller.
Your addStreamModal would become something like (sorry, my coffeescript is not great):
.controller('addStreamModal', [
'$scope', '$modal', '$log', '$http', '$rootScope'
($scope, $modal, $log, $http, $rootScope) ->
$scope.modalTitle = "placeholder" //defaults this value to placeholder
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: 'addStreamModalInstance'
resolve:
public_key: ->
$scope.modalTitle
)
modalInstance.result.then ((modalScope) ->
$scope.modalTitle = modalScope.public_key //updates the default value with the value from the modal
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
])

Answer 2

Ok I have it working now, I went back to the angular example, tested it then slowly adapted it to my needs, heres the code:
.controller "addStreamModal", ($scope, $modal, $http, $log) ->
$scope.public_key = ""
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: "addStreamModalInstance"
resolve:
public_key: ->
$scope.public_key
)
modalInstance.result.then ((public_key) ->
console.log(public_key)
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
And the instance:
.controller "addStreamModalInstance", ($scope, $modalInstance, public_key) ->
$scope.editable = public_key: public_key
$scope.ok = ->
$modalInstance.close $scope.editable.public_key
return
$scope.cancel = ->
$modalInstance.dismiss "cancel"
return
return
HTML:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" name="input" class="form-control" ng-model="editable.public_key">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
So I think the difference is that I nest the public key into the .editable object in the instance controller. I don't exactly understand why this works but it does and I'm happy about that.