One way data flow structure using angular js

I have an application to design survey questions dynamically. I am using AngularJS 1.5+. I have different question like Checkbox list, Radiobutton list, Datepicker and so on. Each one has their own option and settings configuration.

This will be the html structure
enter image description here

For this I have one controller named SurveyDesigner Controller. For each question types I have created separate components for read mode and edit mode.
I repeat the list of questions page wise and initially shown read components. I just want to know how to design the code to accomplish one way data flow in this example will work. Suppose to edit one question and show its relative settings in settings tab , update them and when click on save main controller array will be updated and on click new settings will be reverted.

Here is the fiddle link code which I tried. Need guidance to achieve this.

<div ng-app="demoApp" ng-controller="SurveyDesignerCtrl as $ctrl">
  <div id="div1">
    <fieldset>
      <legend>Settings:</legend>
      <div>
        <p>
          <select>
       <option value=""></option>
       <option ng-repeat="ques in $ctrl.survey_questions | pagequestion : $ctrl.options.page track by $index" value="{{ques.id}}">{{ques.text}}</option>
       </select>
        </p>
      </div>
      <div>
        <p>
          Required : <input>
        </p>
        <p>
          Options <button>
      +
      </button>
          <button>
      -
      </button>
        </p>
        <p>
          Date Format : <input placeholder="dd/mmm/yyyy">
        </p>
      </div>
    </fieldset>
  </div>

  <div id="div2">
    <fieldset>
      <legend>Questions:</legend>
      <div ng-repeat="ques in $ctrl.survey_questions | pagequestion : $ctrl.options.page track by $index">
        <div ng-if="ques.type == 'CheckBoxList'">
          <checkboxlist-read question="ques" ng-if="!ques.edit"></checkboxlist-read>
          <checkboxlist-edit question="ques" ng-if="ques.edit"></checkboxlist-edit>
        </div>

        <div ng-if="ques.type == 'RadioButtonList'">
          <radiobuttonlist-read question="ques" ng-if="!ques.edit"></radiobuttonlist-read>
          <radiobuttonlist-edit question="ques" ng-if="ques.edit"></radiobuttonlist-edit>
        </div>

        <div ng-if="ques.type == 'DatePicker'">
          <datepicker-read question="ques" ng-if="!ques.edit"></datepicker-read>
          <datepicker-edit question="ques" ng-if="ques.edit"></datepicker-edit>
        </div>

      </div>
    </fieldset>
  </div>
var designer = function() {
  var ctrl = this;
  ctrl.options = {
    page: 1
  };
  ctrl.settings = {
    selected: ""
  };
  ctrl.survey_questions = [{
    page: 1,
    questions: [{
        id: 1,
        type: 'CheckBoxList',
        text: 'Please select car model ?',
        options: ['A', 'B', 'C'],
        required: false,
        edit: false,
      },
      {
        id: 2,
        type: 'RadioButtonList',
        text: 'Please select car color ?',
        options: ['A', 'B', 'C'],
        required: false,
        edit: false,
      },
      {
        id: 3,
        type: 'DatePicker',
        text: 'Please select date?',
        options: [],
        format: 'dd/mm/yyyy',
        required: false,
        edit: false,
      },
    ]
  }];
}
var checkBoxListRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var checkBoxListEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var radioButtonListRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var radioButtonListEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var datepickerRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
  `
}
var datepickerEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
  `
}

function questionfilter() {
  return function(input, page) {
    debugger;
    return input.find(function(x) {
      return x.page == page
    }).questions;
  };
}
angular.module('demoApp', [])
  .controller('SurveyDesignerCtrl', designer)
  .filter('pagequestion', questionfilter)
  .component('checkboxlistRead', checkBoxListRead)
  .component('checkboxlistEdit', checkBoxListEdit)
  .component('radiobuttonlistRead', radioButtonListRead)
  .component('radiobuttonlistEdit', radioButtonListEdit)
  .component('datepickerRead', datepickerRead)
  .component('datepickerEdit', datepickerEdit);

Source: AngularJS