Hi all

I've been playing around with AngularJS working on a tutorial that I got working locally very well, but now, I've added some of my own code, some JSON without the supplied API and just can't figure out how and what javascript I need. Been working on this for over a week... pulling my hair out

Appreciate any guidance

Please note: I've reduced the object list for viewing purposes.

Ng-options which populates the dropdown:
Code HTML4Strict:
<select ng-model="genreFilter" ng-options="genre.genres for genre in venue.list">
<option value="">All</option>
</select>
The above works but lists:
Code HTML4Strict:
<option value="0">Rock,Metal,Dubstep,Electro</option>
<option value="1">Indie,Drumstep,Dubstep,Electro</option>

I need to ignore duplicate genres and have a single list of all the available genres whether it's one bar or hundred bars.
Code HTML4Strict:
<option value="0">Rock</option>
<option value="1">Metal</option>
<option value="2">Indie</option>
<option value="3">Dubstep</option>
<option value="4">Electro</option>

My JS which works ok:
Code JavaScript:
// Create and drop in as a service factory
barsApp.factory('Venues', function(){
    // This will return the Venues object
    var Venues = {};
    // Array of objects
    Venues.list = [
        {
            id: 0,
            name: 'Bar one',
            genres: ['Rock','Metal','Dubstep','Electro']
        },
        {
            id: 1,
            name: 'Bar Two',
            genres: ['Indie','Drumstep','Dubstep','Electro']
        }
// ....
];
    return Venues;
 
});
 
// Setup controller, provide venues model into our scope
function VenueCtrl($scope, Venues){
    $scope.venue = Venues;
    $scope.availableGenres = [];
    $scope.genreFilter = null;
 
// I think the code below needs to go here.
 
}

This is my problem, should give you an idea of what I'm trying to do.
I need to populate the availableGenres variable with the genre list and return it above.
This snippet was taken from the tutorial please feel free to change. Still not sure what it all means, I've changed to reflect my names above.
Code JavaScript:
$scope.init = function() {
        angular.forEach(Venues.genres, function(genre, index){
            //Only add to the availableGenres array if it doesn't already exist
            var exists = false;
            angular.forEach($scope.availableGenres, function(avGenre, index){
                if (avGenre == genre) {
                    exists = true;
                }
            });
            if (exists === false) {
                $scope.availableGenres.push(genre);
            }
        });
 
    };
 
$scope.setGenreFilter = function(genre) {
        $scope.genreFilter = genre;
    };

New expression returns no results
Code HTML4Strict:
<select ng-model="genreFilter" ng-options="genre for genres in availableGenres">
<option value="">All</option>
</select>

Any suggestions?
Thank you