Although the pathway may vary in length, we can simplify the issue by utilizing a single variable path. This approach remains effective as long as the structure of the data object remains intact (or if altered, be sure to rerun the preparatory code).

Here is the data:

$scope.form = {
    data: {
      sampleData: '123'//The depth of this could be unknown
    }
};

However, the only essential variable required to maintain the connection between sampleData and its container is the final one - "sampleData". The other property names can be discarded once we acquire a reference to the data object and the "sampleData" property name.

Within the controller:

//Retrieve the server path, split it to form an array of property names
var path = 'data.sampleData'.split('.');
//Modifications will commence shortly
var prevValue = $scope.form;
var nextValue;

for(var i = 0; i < path.length - 1; i++){ //(Note that we are not looping all the way through (-1)!)
    //Access each property step by step
    nextValue = prevValue[path[i]];
    if(nextValue == undefined){
        //This indicates an error where the expected property was not present in the data.
        //Handling this situation is up to you. Executing the following code will insert the missing properties to maintain functionality.
        nextValue = prevValue[path[i]] = {};
    }
    //Initially, prevValue refers to $scope.form, then form.data
    prevValue = nextValue;
 }
 //$scope.bindingContainer denotes a pointer to $scope.form.data object
 $scope.bindingContainer = prevValue;
 //$scope.bindingValue represents the final property name, "sampleData"
 $scope.bindingValue = path[path.length-1];

In the template:

<input type="text" ng-model="bindingContainer[bindingValue]">

Everything should function smoothly (providing no alterations like $scope.form.data = somethingElse occur).

We are bending the rules slightly since now the template does not directly mention the original $scope.form object. Yet, this should not pose an issue because it holds a reference to the data object and its "sampleData" property. As long as $scope.form still points to the same data object, we have everything necessary.

A new custom directive named my-dynamic-model has been developed to be used with <input> elements in your Angular application. This directive facilitates referencing a scope variable, $parsed, which points to the correct array within $scope.bindingValue.

To see this directive in action, check out the live demonstration on Plunker.

With this custom directive, you can now specify nested hierarchies within $scope.bindingValue and ensure that any updates will be reflected accurately in the respective $scope variable. Just remember to provide a complete path in the $scope object hierarchy.

IMPLEMENTATION:

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

app.controller('MyController', function($scope) {
  $scope.form = {
    data: { 
      sampleData: '1234',
      sampleData1: {
        sampleData2: '2345'
      }
    }
  };

  $scope.bindingValue = ['form.data.sampleData', 'form.data.sampleData1.sampleData2'];
});


app.directive('myDynamicModel', function( $parse, $log ) {
    return function( scope, el, attrs ) {
        var model = $parse( attrs.myDynamicModel );
        var finalModel = $parse(model(scope));

        finalModel.assign(scope, finalModel(scope));
        scope.$apply();

        el.bind('keyup', function() {
            finalModel.assign(scope, el.val());
            if (!scope.$$phase) scope.$apply();
        })
    }
});

USAGE IN HTML:

<div ng-controller="MyController">
    <input type="text" ng-model="form.data.sampleData" my-dynamic-model="bindingValue[0]" placeholder="Update me">
    <input type="text" ng-model="form.data.sampleData1.sampleData2" my-dynamic-model="bindingValue[1]" placeholder="Update me too">

  <div>{{ form.data.sampleData }}</div>
  <div>{{ form.data.sampleData1.sampleData2 }}</div>
</div>

Perhaps you are currently working with Angular and exploring different syntax options. If so, check out this insightful article on the controller as syntax.

function ExampleCtrl($scope) {
    $scope.bindingValue = data.sampleData;
    $scope.bindingPrefix = 'data';
    $scope.bindingSuffix = 'sampleData';
}
// Controller or Controller as syntax is just a shorthand name for the controller.

<body ng-app="ExampleApp">
  <div class="example" ng-controller="ExampleCtrl">
    <input type="text" ng-model="bindingValue">
  </div>
</body>

You can try a different syntax variation like this:

function ExampleCtrl() {
  var ctrl = this;

  ctrl.bindingValue = data.sampleData;
  ctrl.bindingPrefix = 'data';
  ctrl.bindingSuffix = 'sampleData';
}

<body ng-app="ExampleApp">
  <div class="example" ng-controller="ExampleCtrl as ctrl">
    <input type="text" ng-model="ctrl.bindingValue">
  </div>
</body>

To begin, construct a scope object within your controller:

$scope.data = {
    sampleData: {
        childSampleData: null
    },
    additionalItem: null,
    moreInfo: {
        Child1: null,
        Child2: null
    }
}

Next, ensure that your HTML references the scope object correctly:

<input type="text" ng-model="data.sampleData.childSampleData">
<input type="text" ng-model="data.additionalItem">
<input type="text" ng-model="data.moreInfo.Child1">
<input type="text" ng-model="data.moreInfo.Child2">

It is important to note that you cannot access an ngModel in the manner shown in your code snippet. Therefore, using

ng-model="form[bindingPrefix][bindingSuffix]"

is incorrect as the form object cannot be accessed in this context. Instead, make use of dot notation to access child objects as demonstrated in the HTML.

If there are uncertainties regarding which ngModel needs updating, consider implementing a function like the following:

<input type="text" ng-model="item1" ng-change="updateModel()">

$scope.updateModel = function() {
    $scope.data[bindingPrefix][bindingSuffix] = $scope.item1;
}