How to display output of function from ng-init in div?

Question

Trivial to most

Ok so I have this div that I want to bind some values into AFTER the ng-if has been set to true and AFTER the ng-init has been called.. at this point my ng-init is getting called but the message isnt binding. I might have the wrong tags on but you get what I mean.. i want the function to be called after my statement becomes true.

    <div ng-repeat="field in model.fieldData">
        <button class="btn-xs" ng-show="!isLocked(field.Id)" ng-click="openField(field)">
            Edit
        </button>

        <div ng-if="isLocked(field.Id)" ng-init="msg = getLockMessage(field.Id)" ng-bind="msg">
        </div>
    </div>

Answer 1

Look this plunker:

plunker

Is a little example based on your html, and works. Make a little changes the element msg change inside the element parent, because if exist a lot of fieldData then the same variable is replaced.

The JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = {
      fieldData: [{
      Id: 123,
      locked: false,
    }]
  };
  $scope.isLocked = function(element) {
    return element.locked;
  }
  $scope.openField = function(element) {
    element.locked = true;
  }
  $scope.getLockMessage = function(element) {
    return "message from " + element.Id
  }
});

And the html:

  <div ng-repeat="field in model.fieldData">
        <button class="btn-xs" ng-show="!isLocked(field)" ng-click="openField(field)">
            Edit
        </button>

        <div ng-if="isLocked(field)" ng-init="field.msg = getLockMessage(field)" ng-        bind="field.msg">
        </div>
    </div>