Cannot set the property ticked of what's undefined

[ArshalJain]

html :

controller : $scope.ok = function () { $modalInstance.close(); };

$scope.cancel = function () { $modalInstance.dismiss('cancel'); };

$scope.legends = [];

$scope.update = function(data){ console.log("asdas"); }; $scope.applyChart = function(){ $scope.chart(); $scope.digest(); } $scope.chart = function(){ // Set the dimensions of the canvas / graph var margin = { top : 30, right : 20, bottom : 70, left : 50 }, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;

  // Parse the date / time
  var parseDate = d3.time.format("%d-%b-%y").parse;

  // Set the ranges
  var x = d3.time.scale().range([ 0, width ]);
  var y = d3.scale.linear().range([ height, 0 ]);

  // set the colour scale
  var color = d3.scale.category10();

  // Define the axes
  var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);

  var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

  // Define the line
  var valueline = d3.svg.line().x(function(d) {
  return x(d.Date);
  }).y(function(d) {
  return y(d.Number);
  });

  // Adds the svg canvas
  var canvas = d3.select("#chart").append("svg").attr("width",
    width + margin.left + margin.right).attr("height",
    height + margin.top + margin.bottom).append("g").attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

  var legend = d3.select("#legend");

  // Get the data
  d3
    .json(
            "app/module/esa/assignment-listing-details/testData.json",
            function(data) {
                var keys = [];
                var counter = 0;
                var set=[];
                data.forEach(function(d) {
                    d.Date = parseDate(d.Date);
                    d.Number = +d.Number;
                });

                // Scale the range of the data
                x.domain(d3.extent(data, function(d) {
                    return d.Date;
                }));
                y.domain([ d3.min(data, function(d) {
                    return d.Number;
                }), d3.max(data, function(d) {
                    return d.Number;
                }) ]);

                // Nest the entries by symbol
                var dataNest = d3.nest().key(function(d) {
                    return d.Legend;
                }).entries(data);

                legendSpace = width / dataNest.length; // spacing for the legend

                // Loop through each symbol / key
                dataNest
                        .forEach(function(d, i) {

                            canvas.append("path").attr("class", "line")
                                    .style("stroke", function() { // Add the colours dynamically
                                        return d.color = color(d.key);
                                    }).attr("id", 'tag' + d.key) // assign ID
                                    .attr("d", valueline(d.values))
                                    .attr("show","true");
                            // Add the Legend
                            canvas
                                    .append("text")
                                    .attr(
                                            "x",
                                            legendSpace / 2 + i
                                                    * legendSpace)
                                    // space legend
                                    .attr("y", height + 50)
                                    .attr("class", "legend")
                                    // style the legend
                                    .style("fill", function() { // Add the colours dynamically
                                        return d.color = color(d.key);
                                    })
                                    .on(
                                            "click",
                                            function() {
                                                // Determine if current line is visible 
                                                var active = d.active ? false
                                                        : true, newOpacity = active ? 0
                                                        : 1;
                                                // Hide or show the elements based on the ID
                                                d3
                                                        .select(
                                                                "#tag"
                                                                        + d.key)
                                                        .style(
                                                                "opacity",
                                                                newOpacity);
                                                // Update whether or not the elements are active
                                                d.active = active;
                                            }).text(d.key);

                            keys[counter] = d.key;
                            set[counter] = d;
                            $scope.legends[counter] ={name: d.key,  maker: d.key, ticked: false};
                            counter++;
                        });

                legend
                .on("change",
                        function() {
                    var value = document.getElementById("legend").value;

                    var tag = document.getElementById("tag"+value);

                    var show = tag.getAttribute("show")

                    var newShow = true;
                    if(show == "true")
                        {
                         newShow = false;
                        }
                    else{
                        newShow = true;
                    }
                    var newOpacity = newShow ? 1 : 0 ;
                            // Hide or show the elements based on the ID
                            d3
                                    .select(
                                            "#tag"
                                                    + value)
                                    .style(
                                            "opacity",
                                            newOpacity);

                            // Update whether or not the elements are active
                            tag.setAttribute("show",newShow);
                        })
                .selectAll("option").data(keys)
                  .enter().append("option")
                  .attr("id",String)
                     .text(String);
                            });

                // Add the X Axis
                canvas.append("g").attr("class", "x axis").attr(
                        "transform", "translate(0," + height + ")")
                        .call(xAxis);

                // Add the Y Axis
                canvas.append("g").attr("class", "y axis").call(yAxis);

};

[alalonde]

Please put code in a separate plunkr or jsfiddle so it can be easily reproduced.