Multiple containers not able to communicate within a user-defined network

Docker Engine Compose
1

Background
I have 2 containers being spun through my docker-compose file :
Angular Web Container and Selenium Hub container. I am trying to perform end to end testing on Angular using Protractor/Selenium.

My docker-compose.yml :

version: "3"
services:
  angular:
    image: ruchitgandhi/angular_mean:test1
    ports:
      - "4200:4200"
    networks:
        - front
  seleniumhub:
      image: selenium/standalone-chrome-debug:latest
      ports:
        - 4444:4444
        - 5900:5900
      networks: 
        - front

networks:
    front:
        driver: overlay

The issue :
The angular container is able to discover the selenium hub and can connect to it on the hub address :
seleniumhub:4444/wd/hub; but the protractor test is unable to connect to the angular container using the service name “angular”.

My Protractor.conf.js file for reference :
const { SpecReporter } = require(‘jasmine-spec-reporter’);

exports.config = {
allScriptsTimeout: 11000,
seleniumAddress: ‘http://seleniumhub:4444/wd/hub’,
specs: [
‘./e2e/**/*.e2e-spec.ts’
],
capabilities: {
‘browserName’: ‘chrome’
},
framework: ‘jasmine’,
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
browser.baseUrl = ‘angular:4200/’; //This does not work
// browser.baseUrl = ‘static ip’; //This works
require(‘ts-node’).register({
project: ‘e2e/tsconfig.e2e.json’
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

If the static ip of the angular container is given, then the selenium hub is able to test the application successfully. But given the service name “angular” it is not able to connect.

Any insights on this?