Update the angular d3 text onclick

Question

Want to change the textValue opacity attribute onclick of a checkbox.
This is the code in the controller.

var textvalue = gs.selectAll("text")
                        .data(function (d) { return pie(d); })
                        .enter().append("text")
                        .attr("opacity", function (d, i) {
                            while (d.id != 0) {
                                if (d.phase == "Something") return "1";
                                else { return 0.5; }
                            }
                        })
                        .text(function (d) { return d; })
                        .on("click", function (d) {
                            if (d.id != 0) {
                                window.open("A link");
                            }
                        })

Onclick of a checkbox I call this method.

  function callMonitor() {
    alert('in monitor ');
    var appElement = document.querySelector('[ng-app=TechRadarApp]');
    var $scope = angular.element(appElement).scope();
    $scope = $scope.$$childHead;
    $scope.$apply(function () {
        $scope.gs.selectAll("text")
                        .data(function (d) { return pie(d); })
                        .enter().append("text")
                        .attr("opacity", function (d, i) {
                             while (d.id != 0) {
                                if (d.phase == "Something else") return "1";
                                else { return 0.5; }
                            }
                        })
                        .text(function (d) { return d; });
    });

Can you help me figure out how to change the gs.selectAll("text") from the call monitor method. I am new to anular and java script and not sure how to access elements.

This is how my controller is initialized

 MyApp.controller('MyController', ['$scope', 'MyService', function ($scope, MyService) {
    getData();
    function getData() {
        MyService.getTechData()
            .success(function (returndata) {
            A lot of code

               } ]);

This is different from the usual way the controller is initialized. Will this change the way i have to access elements inside the controller from outside.

This is the usual declaration.(Copied from the angular site)

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

Answer 1

The problem with the code is that you are creating new text DOM element inside your callMonitor function:

    $scope.gs.selectAll("text")
    .data(function (d) { return pie(d); })
    .enter()
    .append("text")//this will create new text DOM elemnet for the data
    .attr("opacity", function (d, i) {
                                 while (d.id != 0) {
                                    if (d.phase == "Something else") return "1";
                                    else { return 0.5; }
                                }
                            })
      .text(function (d) { return d; });

The correct approach would be that you don't create any text DOM because i am assuming you must have already done that before calling this callMonitor function.

So it should be simply this:

$scope.gs.selectAll("text")
        .attr("opacity", function (d, i) {
                     while (d.id != 0) {
                       if (d.phase == "Something else") return "1";
                               else { return 0.5; }
                       }
                     }); 

Hope this helps!