how to display data in a angularjs form when two checkboxes are checked?

I have a form which contains 4 checkboxes -

■ angularjs ■ jquery ■ ruby ■ Do nothing

In my controller there is a $watch service that is keeping track of the checkbox that is getting clicked.

 $scope.$watch("formData.displayOption", function(displayOption) {
        if(displayOption) {
          var value1 = displayOption.angularJs,
              value2 = displayOption.jquery,
              value3 = displayOption.ruby,
              value4 = displayOption.doNothing;

          console.log(value1, value2, value3, value4);

          $scope.pages = null;
          $scope.message = null;

          if (value1 === true ) {
            $scope.pages = groupOne;
          } else if (value2 === true) {
            $scope.pages = groupTwo;
          } else if (value3 === true) {
            $scope.pages = groupThree;
          } else {
            $scope.message = 'No Options';
          }
        }
      }, true);

and the groupOne,groupTwo,groupThree that i am assigning to $scope.pages is

  var groupOne = [
    { name: 'js'},
    { name: 'angjs'},
    { name: 'angularjs'}
  ];

  var groupTwo = [
    { name: 'jquery'},
    { name: 'jquery-ui'}
  ];
  var groupThree = [
    { name: 'Ruby'}
  ];

So when angularjs is checked -> groupOne is displayed similarly for jquery->groupTwo & ruby->groupThree

What i am trying to do is when two checkboxes are ticked i want to display both the data corresponding to the checked box and similarly when the checkbox is unchecked i want the data to disappear. Like if ✓ angularjs and ✓ jquery then the displaying data should be

• js
• angjs
• angularjs
• jquery
• jquery-ui

PLUNKER LINK