AngularJS: Array.prototype.find () not working in Chrome

Question

I have a problem when my angular code works in firefox but not in chrome.

The browser console prints this:

TypeError: undefined is not a function
    at setSelectedColor (http://localhost:3000/assets/products/controllers/mens_detail_controller.js?body=1:24:54)

This is my controller (pay attention to console.logwhere the failure occurs):

app.controller('MensDetailCtrl', ['$scope', '$resource', '$controller', 'Product', function($scope, $resource, $controller, Product) {
  $controller('ProductsDetailCtrl', {$scope: $scope});

  $scope.init = function(id, locale, selected_color_id)
  {
    $scope.product = Product.get({productId: id, locale: locale}, function(data) {
      var unsorted_products_colors = data.products_colors.filter(function(product_color) {
        return product_color.mens == true;
      });

      $scope.products_colors = unsorted_products_colors.sort(function(a, b) {
        return a.mens_sort_order > b.mens_sort_order;
      });

      setSelectedColor(selected_color_id);
    });

  }

  var setSelectedColor = function(selected_color_id) {
    console.log("ffff"); //prints
    if (selected_color_id) {
      console.log("eeeffff"); //prints
      // the error seems to happen at this next line, which is line 24:
      $scope.selected_color = $scope.products_colors.find(function(el) {
        return el.id == selected_color_id;
      });
    } else {
      console.log("hhffff");
      $scope.selected_color = $scope.products_colors[0];
    }
    console.log("ffffzzz"); // does NOT print

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }


}]);

Why does it work completely in Firefox, but not in Chrome? How can i fix this?

== UPDATE == Even when I print the value $scope.products_colorsright before the crash, it displays an object in my browser console:

ffff
eeeffff 
[Object]0: Object$$hashKey: "004"color: Objectcolor_id: 32created_at: "2014-08-12T19:47:32.000Z"id: 91mens: truemens_sort_order: 0product_id: 15product_images: Array[2]updated_at: "2014-08-12T19:47:32.000Z"variants: Array[1]womens: truewomens_sort_order: 0__proto__: Objectlength: 1__proto__: Array[0]

== UPDATE 2 ==

Removing .find(...)and replacing it with an array index corrects the error, but it does not fix the error, because I need to capture elements with a specific attribute:

  var setSelectedColor = function(selected_color_id) {
    if (selected_color_id) {
      // $scope.selected_color = $scope.products_colors.find(function(el) {
      //         return el.id == selected_color_id;
      //       });
      $scope.selected_color = $scope.products_colors[0]
    } else {
      $scope.selected_color = $scope.products_colors[0];
    }

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }

Answer 1

I installed it by replacing .findwith.filter(...)[0]