Create Isolated Scope using Directive

If you want each client to be totally isolate then you need to put all of the HTML being used within the template of the directive. this is because the current html you have, and the model's your binding are controlled by the controller and not the directive

I.E... (haven't tested with your code, but its what you need to do) - it's likely you need to change the ng-model in your template to the model you will push into the directive though - this is just as an example

return{
    ....
    template: '<legend>Client 156510</legend>'
            + '<section>'
            + '<div class="horizontal-field">'
            ...........
            + '</section>'
}

then your html would simply be something like (again, psuedo-code):

<fieldset client="156510" ng-model="yourModel"></fieldset>

If i understand your question correctly then enabling transclusion should solve your problem:

angular.module("plunker", [])
  .controller("ClientCtrl", function($scope) {})
  .directive("client", function() {
    return {
      restrict: "A",
      scope: {
        name: "@name",
        client: "=client"
      },
      transclude: true,
      template: '<div ng-transclude></div>'
    };
  });

I believe that you do things in wrong way since uou broke the DRY principle. Instead of repeating HTML for each client in view, move it into directive's template and pass into directive isolated scope client themselve. Of course, you can pass into directive only client's id and get client from some service just in directive if you want. And don't specify all Angular service classes manually like ng-pristine, ng-dirty etc.

Controller and directive

app = angular.module("plunker", []).controller("ClientCtrl", function($scope) {
  $scope.clients = [{
    id: 12345,
    firstName: 'First',
    lastName: 'First',
    middleInitial: 'A'
  }, {
    id: 123456,
    firstName: 'Second',
    lastName: 'Second',
    middleInitial: 'B'
  }];

})
.directive("client", function() {
  return {
    restrict: "A",
    templateUrl: 'client-form.html',
    scope: {
      client: "=client"
    }
  };
});

Client form template

<fieldset ng-form='clientForm'>
  <legend>Client {{client.id}}</legend>
  <section>
    <div class="horizontal-field">
      <label for="title">Title</label>
      <select ng-model="client.title" name="title">
        <option value=""></option>
        <option value="mr">Mr.</option>
        <option value="mrs">Mrs.</option>
        <option value="ms">Ms.</option>
        <option value="miss">Miss</option>
        <option value="dr">Dr.</option>
      </select>
    </div>
    <div class="horizontal-field">
      <label for="first-name">First Name</label>
      <input placeholder="First Name" required="" autofocus="" ng-model="client.firstName" name='first_name' type="text" >
    </div>
    <div class="horizontal-field">
      <label for="middle-initial">Middle Initial</label>
      <input maxlength="1" ng-model="client.middleInitial" type="text" name="middle_initial" value="" id="middle-initial">
    </div>
    <div class="horizontal-field">
      <label for="last-name">Last Name</label>
      <input placeholder="First Name" ng-model="client.lastName" type="text" name="last_name">
    </div>
  </section>
</fieldset>

View

<div ng-repeat='client in clients' client='client' ></div>

Plunker